Set div height equal to screen size

Question

I have a div element in twitter-bootstrap which will have content that will overflow vertically outside the screen   I would like the div to take the height of the size of the browser window and let the rest of the content scroll vertically within the window   I have a sample that is not working  jsFiddle   content       border  1px solid  000      overflow-y auto      height 100       lt div class  container-fluid  gt       lt div class  row-fluid  gt           lt div class  span3  gt Side Bar lt  div gt            lt div class  span9  id  content  gt              Content Bar Example Content          lt  div gt       lt  div gt   lt  div gt    I am posting this question after reading so questions like SO Questions  EDIT--  Sorry guys I guess I got my question wrong   What I would like is that my div must fill the rest of the vertical space in the screen   It would be great if someone can suggest a responsive solution

User · Answer

Using CSS  height  100    matches the height of the parent  This could be anything  meaning smaller or bigger than the screen  Using  height  100vh   matches the height of the viewport    container       height  100vh      overflow  auto      According to Mozilla s official documents  1vh is      Equal to 1  of the height of the viewport s initial containing block

User · Answer

use               document  height   property  and set to the div from script and set     overflow auto   for scrolling

User · Answer

try this     document  ready function            content   height   window  height

User · Answer

Use simple CSS height  100   matches the height of the parent and using height  100vh matches the height of the viewport   Use vh instead of

User · Answer

This worked for me JsFiddle  Html    bootstrap  lt div class  row  gt     lt div class  col-4 window-full  style  background-color green  gt      First Col    lt  div gt     lt div class  col-8  gt      Column-8    lt  div gt   lt  div gt    css   row      background   f8f9fa     margin-top  20px       col      border  solid 1px  6c757d     padding  10px      JavaScript  var elements   document getElementsByClassName  window-full    var windowheight   window innerHeight    px    fullheight elements   function fullheight elements        for let el in elements           if elements hasOwnProperty el                elements el  style height   windowheight                     window onresize   function event        fullheight elements       Checkout JsFiddle link JsFiddle

User · Answer

You need to give height for the parent element too  Check out this fiddle   CSS   html  body  height  100      content   container-fluid   span9       border  1px solid  000      overflow-y auto      height 100        JavaScript  using jQuery  Way     document  ready function          window  resize function                fullheight   height   document  height

[css] Set div height equal to screen size

Examples related to css

Examples related to html

Examples related to twitter-bootstrap

Examples related to height

Examples related to responsive-design