How To Make Div Height 100% Between Header And Footer
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 h
Solution 1:
I created an example in jsfiddle:
UPDATED JsFiddle: http://jsfiddle.net/5V288/1025/
HTML:
<body><divid="header"></div><divid="content"><div>
Content
</div></div><divid="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: 020px;
}
#content > div {
padding: 70px0;
}
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.
Solution 2:
Just a fix for Andreas Winter solution:
*With the solution of it, you would have problems if the content is greater than the available window area.
Solution 3:
I think what you're looking for is "multiple absolute coordinates". A List Apart has an explanation here but basically, you just need to specify the body's position as absolute, and set both top: 50px and bottom: 50px:
<body><style>#header {
position: absolute;
height: 50px;
}
#body {
position: absolute;
top: 50px;
bottom: 50px;
background-color: yellow;
}
#footer {
position:absolute;
height: 50px;
bottom: 0;
}
</style><divid="header">Header</div><divid="body">Content goes here</div><divid="footer">Footer</div>http://www.spookandpuff.com/examples/absoluteCoordinates.html shows the technique in a prettier way.
Post a Comment for "How To Make Div Height 100% Between Header And Footer"