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
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.
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.
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.
You need to give height
for the parent element too! Check out this fiddle.
html, body {height: 100%;} #content, .container-fluid, .span9 { border: 1px solid #000; overflow-y:auto; height:100%; }
$(document).ready(function(){ $(window).resize(function(){ $(".fullheight").height($(document).height()); }); });
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With