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
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
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
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
Use CSS vh units! Probably the most obvious and non-hacky way to go about a sticky footer would be to make use of the new css viewport units. Take for example the following simple markup: <header>header goes here</header> <div class=”content”>This page has little content</div> <footer>This is my footer</footer> If the header is say 80px high … Read more