Menu
Is there a way to setup a layout so that the header is 50px, body is 100% and footer is 50px?
I would like the body to use up the entire viewing area at minimum. I would like to have the footer and header to be on the screen at all times
778
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.
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.
Conclusion. With no height value provided for the HTML element, setting the height and/or min-height of the body element to 100% results in no height (before you add content).
I created an example in jsfiddle:
UPDATED JsFiddle: http://jsfiddle.net/5V288/1025/
HTML:
<body>
<div id="header"></div>
<div id="content"><div>
Content
</div></div>
<div id="footer"></div>
</body>
CSS:
html { height: 100%; }
body {
height:100%;
min-height: 100%;
background: #000000;
color: #FFFFFF;
position:relative;
}
#header {
height:50px;
width:100%;
top:0px;
left:0px;
background: #CCCCCC;
position:fixed;
}
#footer {
height:50px;
width:100%;
bottom:0px;
left:0px;
background: #CCCCCC;
position:fixed;
}
#content {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
height:100%;
padding: 0 20px;
}
#content > div {
padding: 70px 0;
}
Without border-box the content will be height 100% + 140px padding. With the border-box the content height will be 100% and the padding will be inside.
200
Just a fix for Andreas Winter solution:
http://jsfiddle.net/5V288/7/
*With the solution of it, you would have problems if the content is greater than the available window area.
22
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
