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:
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%;
/noverflow: 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%;
}
