Menu
From my research, this appears to be an absolutely classic CSS question, but I can't find a definitive answer - so StackOverflow it is.
How do I set a content div to take up 100% of the body height, minus the height taken up by a fixed-height header and footer?
<body> <header>title etc</header> <div id="content">body content</div> <footer>copyright etc</footer> </body> //CSS html, body { height: 100%; } header { height: 50px; } footer { height: 50px; } #content { height: 100% of the body height, minus header & footer } I would like to use pure CSS, and for the answer to be bulletproof across browsers.
859
Syntax: To set a div element height to 100% of the browser window, it can simply use the following property of CSS: height:100vh; Example: HTML.
height: 100% gives the element 100% height of its parent container. height: auto means the element height will depend upon the height of its children.
The HTML <th> height Attribute is used to specify the height of the table header cell.
this version will work in all the latest browsers and ie8 if you have the modernizr script (if not just change header and footer into divs):
Fiddle
html, body { min-height: 100%; padding: 0; margin: 0; } #wrapper { padding: 50px 0; position: absolute; top: 0; bottom: 0; left: 0; right: 0; } #content { min-height: 100%; background-color: green; } header { margin-top: -50px; height: 50px; background-color: red; } footer { margin-bottom: -50px; height: 50px; background-color: red; } p { margin: 0; padding: 0 0 1em 0; }<div id="wrapper"> <header>dfs</header> <div id="content"> </div> <footer>sdf</footer> </div>Scrolling with content: Fiddle
163
As far as it is not cross browser solution, you might be take advantage of using calc(expression) to achive that.
html, body { height: 100%; } header { height: 50px; background-color: tomato } #content { height: -moz-calc(100% - 100px); /* Firefox */ height: -webkit-calc(100% - 100px); /* Chrome, Safari */ height: calc(100% - 100px); /* IE9+ and future browsers */ background-color: yellow } footer { height: 50px; background-color: grey; } Example at JsFiddle
If you want to know more about calc(expression) you'd better to visit this site.
30
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
