Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Set div height equal to screen size

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%; }  <div class="container-fluid">     <div class="row-fluid">         <div class="span3">Side Bar</div>          <div class="span9" id="content">             Content Bar Example Content         </div>     </div> </div> 

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

like image 886
Anand Sunderraman Avatar asked Aug 29 '12 06:08

Anand Sunderraman


People also ask

How div height is equal to body height?

Answer: Set the 100% height for parents too And we all know that the default value of the height property is auto , so if we also set the height of <body> and <html> elements to 100%, the resulting height of the container div becomes equal the 100% height of the browser window.

How can I make div 100 page height?

With the advent of the CSS flex model, solving the 100% height problem becomes very, very easy: use height: 100%; display: flex on the parent, and flex: 1 on the child elements. They'll automatically take up all the available space in their container.


2 Answers

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.

like image 71
Kurt Van den Branden Avatar answered Oct 13 '22 19:10

Kurt Van den Branden


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());     }); }); 
like image 37
Praveen Kumar Purushothaman Avatar answered Oct 13 '22 19:10

Praveen Kumar Purushothaman