How to keep footer at the bottom even with dynamic height website

问题

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;

回答1:

I believe you are looking for a Sticky Footer

Try this: http://ryanfait.com/sticky-footer/

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>

回答2:

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>

You need at least an element with a `#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.

回答3:

My favorite jQuery/CSS solution for a sticky footer (non-fixed) is this:

CSS:

html {
    position: relative;
    min-height: 100%;
}
footer {
    display:none;
    position: absolute;
    left: 0;
    bottom: 0;
    height: auto;
    width: 100%;
}

jQuery:

function footerAlign() {
  $('footer').css('display', 'block');
  $('footer').css('height', 'auto');
  var footerHeight = $('footer').outerHeight();
  $('body').css('padding-bottom', footerHeight);
  $('footer').css('height', footerHeight);
}


$(document).ready(function(){
  footerAlign();
});

$( window ).resize(function() {
  footerAlign();
});

DEMO: http://codepen.io/anon/pen/ZQxQoR

Note: your footer must start with <footer> and end with </footer> to use this code as is, or you can modify the code to match your footer's id/class.

回答4:

Hereby a simple solution

CSS:

.footer_wrapper {  width:100%;     background-color:#646464; }
.footer_wrapper.fixed {position:fixed; bottom:0px;}

JS:

if ($(".Page").height()<$(window).height()){
        $(".footer_wrapper").addClass("fixed");
    }else{
        $(".footer_wrapper").removeClass("fixed");
    }

HTML:

<div class="Page"> 

        /* PAGE CONTENT */

        <div class="footer_wrapper" >

            /* FOOTER CONTENT */

        </div>
    </div>

回答5:

Use the following to make a fixed footer on your web-page:

CSS:

body, html
{
    margin: 0px; padding: 0px;
}

#footer
{
    width: 100%;
    height: 30px;
    position: fixed;
    bottom: 0px;
    left: 0px;
    right: 0px;
    /*text-align, background-color, and other specific styles can be applied here. You can change the height from 30px to anything which suits your needs. You can even comment Left: 0px & Right: 0px, but to make sure that it works in all browsers, lets leave them there.*/
}

HTML:

/*Place this div anywhere on the page, inside the form tags.*/
<div id="footer">
/*Your text/elements goes here*/
</div>

Hope this helps!

Cheers,

Veno

回答6:

#footer {
   position:fixed;
   left:0px;
   bottom:0px;
   height:30px;
   width:100%;
   background:#999;
}

/* IE 6 */
* html #footer {
   position:absolute;
   top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}

see the working sample,

http://jsfiddle.net/RC3YX/

回答7:

Not sure if this is what your looking for:

<div style="position: fixed; bottom: 0px; left: 0px; right: 0px;">footer</div>

回答8:

See these two articles. http://ryanfait.com/sticky-footer/ and http://css-tricks.com/snippets/css/fixed-footer/

回答9:

I was checking this question to find the same answer. This was asked sometime back and maybe this is a new feature added by jQuery. But this is a simple fix that exists now:

Just add data-position="fixed" to the div tag if you are using jQuery.

http://demos.jquerymobile.com/1.2.0/docs/toolbars/bars-fixed.html

<div data-role="footer" data-position="fixed">
        <h5>footer - page 3</h5>
        </div><!-- /footer -->

Hope this helps.

来源：https://stackoverflow.com/questions/8815784/how-to-keep-footer-at-the-bottom-even-with-dynamic-height-website

标签

jquery

css

html

footer