This may work for you. It works on IE6 and Firefox 2.0.0.17 for me. Give it a shot. I made the footer’s height very tall, just for effect. You would obviously change it to what you need. I hope this works for you. <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”> <html> <head> <title>Liquid Footer</title> <style … Read more
One potential solution is to swap your content:after to content:before. Working Demo CSS: /* .content:after { content: “”; display: block; } */ .content:before { content: “”; display: block; height: 45px; }
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
you could try positioning the element as { /other css attribs you want to set…;/ position: absolute; bottom:0; width:100%; height: 20px;} or whatever height you want. This will give you an always on footer. Hope it helps.
Try setting the styles of your footer to position:absolute; and bottom:0;.
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
Now that Bootstrap 4 is flexbox, a sticky footer can be done using… <wrapper class=”d-flex flex-column”> <nav> </nav> <main class=”flex-fill”> </main> <footer> </footer> </wrapper> body, wrapper { min-height:100vh; } .flex-fill { flex:1 1 auto; } Demo: Bootstrap 4.0 Sticky Footer Note: The flex-fill utility class is included in the Bootstrap 4.1 and later release. So … Read more
Following a clean method implemented from an online source no longer available (dead link), the minimum code you should need for your page would be (note – probably best to use #bottom-footer instead of footer #bottom-footer for the selection of your footer – that could be part of the issue): html { position: relative; min-height: … Read more
As you have mentioned, position: fixed would position the footer with the respect to the viewport rather than the page itself. Therefore, we have to keep the element in normal flow and somehow position it to the bottom of the page. There are couple of approaches to achieve that, which have been discussed in the … 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