如果页面很短,则将HTML页脚保留在窗口底部

Question

我的一些网页很短.在这些页面中,页脚可能最终位于窗口中间,页脚下方是空白(白色).那看起来很难看.我希望页脚位于窗口的底部,有限内容的主体会被拉伸.

但是,如果网页很长并且您必须滚动以查看页脚(或所有页面),那么事情应该正常.

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

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

Answer 1

看看这个网站.他有一个关于如何用css做这个的好教程.

我复制了他的CSS,以防万一马修的网站被删除.

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