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

Question

我的网站上有几个网页有点短，如下图所示。在这样的页面上，页脚不会到达屏幕底部。如何确保页脚位于我网站所有页面的底部，对于所有屏幕尺寸？

Answer 1

我通常会在内容区域中添加一个最小高度，因此它始终至少为该高度，因此通常会将页脚放在底部。我估计至少 500-800 像素的最小高度应该可以做到。

Answer 2

您需要一个粘性页脚，查看示例：

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>

或者还有一个例子：http://ryanfait.com/html5-sticky-footer/

希望对您有所帮助！

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>

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

Footer of webpage doesn't reach bottom of page on shorter pages

html

css

position

footer