I'm currently working on a layout with a sticky footer, and I have a specific div that needs to extend all the way down to the footer. However, simply setting the height to 100% doesn't achieve the desired result. I've also experimented with using a display table in the CSS, but that hasn't solved the issue either.
For reference, you can view the layout here: http://jsfiddle.net/NDk5f/2/
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en"><head>
<meta charset="utf-8">
<link href="css/test.css" rel="stylesheet">
</head>
<body>
<div class="navbar">
Navbar
</div>
<div id="wrap">
<div class="container fill">
<div class="page-header">
<h1>Sticky footer</h1>
</div>
<p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.</p>
<p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.</p>
</div>
<div id="push"></div>
</div>
<div id="footer">
Footer
</div>
</body>
</html>
CSS:
*{
margin: 0;
}
html,
body {
height: 100%;
}
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -50px;
}
#push,
#footer {
height: 50px;
}
#footer {
background-color: #f5f5f5;
}
/* Use class .fill to stretch div to page bottom */
.fill{
height:100%;
display:table;
width: 100%;
margin-top: -50px;
padding: 50px 0 0 0; /*set left/right padding according to needs*/
-moz-box-sizing: border-box;
box-sizing: border-box;
background: red;
padding-top:75px;
}
.fill .row {
height: 100%;
display: table-row;
}
.container
{
width: 940px;
}
.container {
margin-right: auto;
margin-left: auto;
}
.container:before,
.container:after {
display: table;
line-height: 0;
content: "";
}
.container:after {
clear: both;
}
.navbar {
position: relative;
z-index: 2;
margin-bottom: 20px;
overflow: visible;
background-color: orange;
}