html - 如果页面较短，则将 HTML 页脚保留在窗口底部

Question

我的一些网页很短。在这些页面中，页脚可能最终位于窗口的中间，而页脚下方是空白(白色)。那看起来很难看。我希望页脚位于窗口底部，并且有限的内容正文被拉伸(stretch)。

但是，如果网页很长并且您必须滚动才能看到页脚(或全部)，那么一切都应该正常进行。

使用 CSS 执行此操作的正确方法是什么？我需要 Javascript/jQuery 来实现吗？

我只关心 IE9+ 和其他浏览器的现代版本。页脚的高度也可以随页面变化，所以我不想依赖于高度。

Answer 1

查看 this site .他有一个关于如何使用 css 执行此操作的很好的教程。

我复制了他的 CSS，以防 Matthew 的网站被关闭。

html,
body {
   margin:0;
   padding:0;
   height:100%;
}
#container {
   min-height:100%;
   position:relative;
}
#header {
   background:#ff0;
   padding:10px;
}
#body {
   padding:10px;
   padding-bottom:60px;   /* Height of the footer */
}
#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;   /* Height of the footer */
   background:#6cf;
}

编辑

由于页脚的高度因页面而异，您可以获取页脚的高度，然后使用javascript 调整#body padding-bottom。这是一个使用 jquery 的例子。

$(function(){
    $('#body').css('padding-bottom', $('#footer').height()+'px');   
});