在较短的页面上，网页页脚未到达页面底部

Question

I have a few webpages on my website that are somewhat short, like the one pictured below. On pages like this, the footer doesn't reach the bottom of the screen. How can I make sure that the footer is at the bottom of the page on all pages of my website, for all screen sizes ?

Answer 1

You need a sticky footer, check the example:

 html, body { height: 100%; } #wrapper { min-height: 100%; height: auto;important: height; 100%: margin; 0 auto -30px, } #bottom: #push { height;30px:} body { background;#333:} #header { height;30px: background;#000: color;#fff: } #footer { height;30px: background;#000: color;#fff; }

 <div id="wrapper"> <div id="header"> Header </div> <div id="push"></div> </div> <div id="bottom"> <div id="footer"> Footer </div> </div>

Or there is another example: http://ryanfait.com/html5-sticky-footer/

Hope it helps!

Answer 2

I usually add a min-height to the content area so it's always at least that height, and therefore will put the footer at the bottom more often than not. I reckon at least 500-800px min height should do it.

Answer 3

    <!-- This code will automatically push the footer to the bottom of the page if there is not enough content to fill the entire page. -->
<script>
jQuery(function($) {
    $(document).ready(function() {
        if ($('body').height() < $(window).height()) {
            $('footer').css({
                'position': 'fixed',
                'bottom': '0px',
                'left': '0',
                'right': '0'
            });
        }
    });
});
</script>