How can I make a div height automatically fit screen and expands if the content exceeds height

Question

On my web page I have a div that expands(height) to fit the size of the screen.

Here is my CSS:

.round-cornerapp {
      -webkit-border-radius: 5px 5px 5px 5px; 
      -moz-border-radius: 5px 5px 5px 5px;
      -o-border-radius: 5px 5px 5px 5px;
      border-radius: 5px 5px 5px 5px;
     background-color: #C2C2BD;
     height:100vh;
     padding-top: .5cm;

   }

I would like the div to adjust automatically if the content extends the size of the screen.

I have tried the following:

.round-cornerapp {
      -webkit-border-radius: 5px 5px 5px 5px; 
      -moz-border-radius: 5px 5px 5px 5px;
      -o-border-radius: 5px 5px 5px 5px;
      border-radius: 5px 5px 5px 5px;
     background-color: #C2C2BD;
     height:100vh;
     height:auto;
     padding-top: .5cm;

   }

The height does not extend automatically with the above unless I remove height: 100vh at which point the height no longer fits the screen depending on the content of the div.

How can I make the Div fit the size of my screen even when empty and automatically expands in height as divs are added

try to use a percentage value for the height (height: 50%; /*or any suitable value*/) — Oday Fraiwan, Feb 01 '15 at 15:11
you can also try min-height: 100vh , I think it will solve your problem. — J Prakash, Feb 01 '15 at 15:15

score 1 · Accepted Answer · answered Feb 01 '15 at 15:36

Use jQuery more specifically, the $(document).height() function.

$('.divFullScreen').height($(document).height());

Otherwise, you could also use CSS as follows.

.divFullScreen {
    min-height: 100vh;
}

PS: your div's class should be divFullScreen for this to work.

How can I make a div height automatically fit screen and expands if the content exceeds height

1 Answers1

Linked