网页的页脚在较短的页面上没有到达页面底部

Question

我的网站上有一些网页有点短，如下图所示。在这样的页面上，页脚没有到达屏幕的底部。如何确保页脚位于我网站所有页面的页面底部，适用于所有屏幕尺寸？

Answer 1

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

＆＃13;

＆＃13;

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; }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

希望它有所帮助！

Answer 2

我通常会在内容区域添加一个最小高度，因此它总是至少达到这个高度，因此会更频繁地将页脚放在底部。我估计至少应该达到500-800px的最小高度。