How-to Set CSS Container Height to Perfectly Fitting Browser Window

August 21st, 2011 by Regaz

CSS How-to Set Block Height to Fit Browser Window




The Tip Show What should be the CSS to Size the Page to Fit Exactly the Space in the Browser Window.

When you have a page’s layout with a Main Container and some Floated Divs inside to Fit Exactly the Contents inside your Main Container you need this CSS Snippet:

CSS How-to Set Block Height to Fit Browser Window - Featured

For a nested multi-div containers like this below:

<html>
<body>
<div id=”wrapper”>
<div id=”container”>

</div>
</div>
</body>
</html>

The CSS should be Simply Set As:

#container {
height: 1%;
overflow: hidden;
}

This Simply and Easily Fix Box Height!
No more needing of use multiple “height: 100%” declarations as:

html, body {
height: 100%;
}
wrapper {
height: 100%
}
container {
height: 100%;
}

Tags: , , ,