http://pixelsvsbytes.com/blog/2011/09/sticky-css-footers-the-flexible-way/ Summary: For a site with a header, content area, and footer: Set html, body {height: 100%;} Set your body (or a wrapper div) to display: table; width: 100%; height: 100%; Set your header, footer, and content area to display: table-row;. Give your header and footer height: 1px;, and give your content area height: auto; … Read more
Yes. It’s the position: fixed property. .footer { position: fixed; bottom: 0; left: 0; right: 0; height: 50px; } Demo: http://jsfiddle.net/ZsnuZ/
Update 2020 – Bootstrap 4.5+ Now that Bootstrap 4 is flexbox, it’s easier to use flexbox for the sticky footer. <div class=”d-flex flex-column min-vh-100″> <nav> </nav> <main class=”flex-fill”> </main> <footer> </footer> </div> Bootstrap 4.0 Sticky Footer (4.0.0) Simple Footer at Bottom Example (4.5.0) Note: The flex-fill utility was included in Bootstrap 4.1 at later release. … Read more
Try setting the styles of your footer to position:absolute; and bottom:0;.
The answer, as Schmalzy points out, can be found here in the examples section of the getbootstrap site. But that example does not include a top nav. For fixed top nav with sticky footer, see this plnkr, or code below. Style CSS: /* Styles go here */ /* Sticky footer styles ————————————————– */ html, body … Read more
You should use a sticky footer solution such as this one : * { margin: 0; } html, body { height: 100%; } .wrapper { min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -142px; /* the bottom margin is the negative value of the footer’s height */ } .footer, .push { height: 142px; … Read more
To get a sticky footer: Have a <div> with class=”wrapper” for your content. Right before the closing </div> of the wrapper place the <div class=”push”></div>. Right after the closing </div> of the wrapper place the <div class=”footer”></div>. * { margin: 0; } html, body { height: 100%; } .wrapper { min-height: 100%; height: auto !important; … Read more