Menu
How do I keep a footer div always at the bottom of the window when I have a page that dynamically set the height (get info from database, for example) with CSS?
If you want to do with jQuery, i came up with this and works fine:
Set the CSS of your footer:
#footer { position:absolute; width:100%; height:100px; } Set the script:
<script> x = $('#div-that-increase-height').height()+20; // +20 gives space between div and footer y = $(window).height(); if (x+100<=y){ // 100 is the height of your footer $('#footer').css('top', y-100+'px');// again 100 is the height of your footer $('#footer').css('display', 'block'); }else{ $('#footer').css('top', x+'px'); $('#footer').css('display', 'block'); } </script> This script must be at the end of your code;
800
If you wrap the content in a tag and set the margin-bottom value to the same as the footer-height, you would be able to read the text that the footer was originally covering.
To make a footer fixed at the bottom of the webpage, you could use position: fixed. < div id = "footer" >This is a footer. This stays at the bottom of the page.
Quick answer: Add “display:flex; flex-direction:column; min-height:100vh;” to body or appropriate layout body element, then add “flex:1;” to content wrapper element/section. I will explain few ways to keep or stick the footer to the bottom of the page if there is not enough content.
I think this will solve all your problems:
<script> $(document).ready(function() { var docHeight = $(window).height(); var footerHeight = $('#footer').height(); var footerTop = $('#footer').position().top + footerHeight; if (footerTop < docHeight) { $('#footer').css('margin-top', 10+ (docHeight - footerTop) + 'px'); } }); </script> #footer When not want the scrollbar if content would fit to screen just change the value of 10 to 0 The scrollbar will show up if content not fits to screen.
84
I believe you are looking for a Sticky Footer
Try this: https://web.archive.org/web/20161117191810/http://ryanfait.com/sticky-footer/ (archive)
From the article above:
layout.css:
* { 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; /* .push must be the same height as .footer */ } /* Sticky Footer by Ryan Fait http://ryanfait.com/ */ The html page:
<html> <head> <link rel="stylesheet" href="layout.css" ... /> </head> <body> <div class="wrapper"> <p>Your website content here.</p> <div class="push"></div> </div> <div class="footer"> <p>Copyright (c) 2008</p> </div> </body> </html> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
