so I have code similar to this (I oversimplified design)

html {
    height: 100%;
}
body {
    min-height: 100%;
}
.register{

}
.background_image{
background-image:url("https://www.freecodecamp.org/news/content/images/2021/06/w-qjCHPZbeXCQ-unsplash.jpg");
background-size:cover;
}
.col{
width:300px;
height:200px;
margin-top:10px;
background-color:coral;
text-align:center;

}

  <div class="background_image">
 <div class="register">
                          
                          <div class="col">
                          Some content 
                          </div><div class="col">
                          <div>
                        Some content 
                        </div>
                          </div><div class="col">
                          <div>
                        Some content
                        </div>
                          </div><div class="col">
                          <div>
                       Some content
                        </div>
                          </div><div class="col">
                          Some content
                          </div>
                                 
                        
  </div>
  </div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

When my div with class = register has less content than viewport (for example 3 rows) then I want this div to be across viewport, but when it has more content than viewport , then it should spread to match content. I tried with

    @media screen and (min-width: 800px) {
  .register{
    height: 100vh; 
  }
  
}

but then, if there is a content out of viewport, but this makes my register 100vh no matter how big the content is.

CodePudding user response：

You can set min-height on the div.

This snippet uses 100vh explicitly.

Note only 2 of the inner divs have been left in this snippet so you can see the effect on running the snippet full page on a desktop/laptop screen.

html {
    height: 100%;
}
body {
    min-height: 100vh;
    background-color cyan;
}
.register{
    min-height: 100vh;

}
.background_image{
background-image:url("https://www.freecodecamp.org/news/content/images/2021/06/w-qjCHPZbeXCQ-unsplash.jpg");
background-size:cover;
}
.col{
width:300px;
height:200px;
margin-top:10px;
background-color:coral;
text-align:center;

}

<div class="background_image">
 <div class="register">
                          
                          <div class="col">
                          Some content 
                          </div><div class="col">
                          <div>
                      
                                 
                        
  </div>
  </div>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>