How to make Bootstrap sticky footer content go full page height? - html

Question

I'm using a Boostrap sample to create a sticky footer for a web site using CSS, this all works fine the footer remains in place at the bottom of the page as the page is resized.
On a number of pages I have content that needs to be shown practically full page, barring the footer. The content section of the page therefore needs to be set to 100% height so its content in turn can be sized to full height.
Here's a JSFiddle that demonstrates the problem.
How can we make the green container div full height, so it touches the page top at the top and the top of the footer at the bottom?
Thanks!
<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;
}

Answer 1

I have the solution to your problem. I moved it from JSFiddle to codepen, because I like codepen better. No other reason.
http://cdpn.io/IJHxf
This is essentially where I got the answer from, and they explain it way better than I ever could.
http://v1.reinspire.net/blog/2005/10/11/css_vertical_stretch/
When you implement that answer though, what I found height: auto !important; is the culprit as to why it doesn't immediately work. Comment it out in your #wrap id to see it take full effect. The code pen has additional changes to really see what is going on. What you really need to make your original question work is
#wrap .container {
background-color: lightgreen;
min-height: 100%;
height: auto; /* this line takes care of "more than enough content problem" */
}
html, body {
height: 100%;
background-color: #dedede;
padding: 0;
margin: 0;
}
#wrap {
min-height: 100%;
/* height: auto !important; */
height: 100%;
margin: 0 auto -60px;
}
Actually, what you could do, and would make more sense is instead of commenting out the entire line height: auto !important; You could just take off the !imporant. For example
#wrap {
height: auto !important;
/* changed to */
height: auto;
}
I changed some colors around to make it more apparent what was really happening. You'll see that in the codepen. There are lots more comments in the code pen to see what I really did FYI.
Also, I found that your sticky footer gave my page a scroll bar because of the margin. For me, I got rid of the scroll bar with the code below.
margin: 0 auto -60px;
/* changed to */
margin: 0 auto -80px;