Utilizing a Boostrap sample, I've successfully created a sticky footer for a website using CSS. The footer remains at the bottom of the page even as it is resized. However, on certain pages, there is content that needs to be displayed nearly full-page while still excluding the footer. Thus, the content section must be set to 100% height so its contents can occupy the entire height.
I have provided a JSFiddle to illustrate the issue.
How can we ensure the green container div reaches full height, touching the top of the page and the top of the footer simultaneously?
Thank you!
<div id="wrap">
<!-- Begin page content -->
<div class="container">
<div class="page-header">
<h1>Sticky footer</h1>
</div>
<p class="lead">This is the sticky footer template taken from the Bootstrap web site.</p>
<p class="lead">How can we make this green .container div the full height of its parent #wrap div?</p>
</div>
<div id="push"></div>
</div>
<div id="footer">
<div class="container"></div>
</div>
#wrap .container {
background-color: lightgreen;
}
/* Sticky footer styles */
html, body {
height: 100%;
/* The html and body elements cannot have any padding or margin. */
}
/* Wrapper for page content to push down footer */
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
/* Negative indent footer by it's height */
margin: 0 auto -60px;
}
/* Set the fixed height of the footer here */
#push, #footer {
height: 60px;
}
#footer {
background-color: #f5f5f5;
}