I am trying to create a webpage layout with a header/footer (100% width, 145px height), a 'main area' between the header/footer (100% width, dynamic height), and a container around the content that is a unique background color (860px width, dynamic height but is always 'flush' against the footer).
(See Example for a visual)
The problem I am having is I can't seem to have the 'content container' always be flush with the footer when there is minimal content. Using a setup like the (original example) results in the footer floating over the content if there is a respectable/'normal' amount of content or if the window is resized.
And the Following CSS results in a gap between the content and the footer.
html,body{
margin:0;
padding:0;
height:100%;
background:yellow;
}
.wrap{
min-height:100%;
position:relative;
}
header{
background:blue;
padding:10px;
}
#content{
height:100%;
width: 400px;
margin:0 auto;
background:orange;
padding:30px;
}
footer{
background:blue;
position:absolute;
bottom:0;
width:100%;
height:60px;
}
How can I make the content container be the full height of the screen when content is minimal and have the footer 'stick' to the bottom of the page, while also being dynamic to resize appropriately if there is a normal amount of content (footer is always at the bottom of the content)?
Thank you!
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.
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.
FIDDLE: http://jsfiddle.net/3R6TZ/2/
Fiddle Output: http://fiddle.jshell.net/3R6TZ/2/show/
CSS
html, body {
height: 100%;
margin:0;
}
body {
background:yellow;
}
#wrapper {
position: relative;
min-height: 100%;
vertical-align:bottom;
margin:0 auto;
height:100%;
}
#header {
width: 100%;
height: 150px;
background:blue;
position:absolute;
left:0;
top:0;
}
#content {
background:pink;
width:400px;
margin:0 auto -30px;
min-height:100%;
height:auto !important;
height:100%;
}
#content-spacer-top {
height:150px;
}
#content-spacer-bottom {
height:30px;
}
#divFooter {
width:100%;
height: 30px;
background:blue;
}
HTML
<div id="wrapper">
<div id="header">Header</div>
<div id="content">
<div id="content-spacer-top"></div>
<div id="content-inner">
**Content Goes Here**
</div>
<div id="content-spacer-bottom"></div>
</div>
<div id="divFooter">Footer</div>
</div>
UPDATE
The #content-spacer-top
and #content-spacer-bottom
are used to pad the #content div without using padding or margin that would increase the box size past the 100% height causing problems.
In CSS3, there is the box-sizing
property (more info here) that can fix this issue, but i'm assuming you don't want to depend on CSS3 features.
EDIT
Added a fix and tested down to IE7
UPDATE 2
Alternate method using :before
and :after
pseudo-elements instead of the spacer divs:
http://jsfiddle.net/gBr58/1/
Doesn't work in IE7 or 6 though, and to work in IE8, a <!DOCTYPE>
must be declared (according to w3schools.com), but the HTML is nice and clean
UPDATE 3 (Sorry for so many updates)
Updated it to work down to IE6. I don't normally bother as my company doesn't support IE6, but it was an easy fix...
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