Question

我一直试图让我的页脚延伸到我的页脚，但成效有限。我尝试过使用jQuery来做这件事，但它有一些问题：

<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){

$(window).resize(function(){
var height = $(this).height() - $("#banner-wrapper").height() - $("#footer-wrapper").height()
$('#content').height(height);

})

$(window).resize(); //on page load

});//]]>  

</script>

这会将div拉伸到页脚，但问题是，它基于窗口大小的高度。如果您的内容超出折叠，则#content div不会拉伸适合内容。

http://matthewdail.com/staging/
在这里你可以看到jQuery正在完成这项任务并完美地扩展#content div，但它并没有扩展到适合内容。

我也尝试过一些比较常见的css技巧：

html,body{
height:100%;
}

#content{
width:100%;
margin:0 auto -120px;
float:none;
min-height:100%;
height:auto !important;
height:100%;
}

我到处搜索但找不到解决方法。有人有什么想法吗？

Answer 1

试试这个layout，看看它是否适合您。

http://jsfiddle.net/TCdsK/14/

我已经更新了小提琴，使布局类似于你所拥有的， http://jsfiddle.net/TCdsK/16/

希望这会有所帮助

编辑：确保所有列的高度相同 http://jsfiddle.net/TCdsK/21

Answer 2

您是否希望内容div向下延伸，以便将页脚推到窗口底部？你最好using something like this：

html {
    position: relative;
    min-height: 100%;
}
body {
    margin: 0 0 100px; /* bottom = footer height */
}
footer {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 100px;
    width: 100%;
}

如果身体内容不足，则页脚仍将保留在底部。 Demo here

如何将div垂直拉伸到页脚，并拉伸以适应内容？

2 个答案: