2

我一直在尝试将 div 延伸到我的页脚，但效果有限。我已经尝试使用 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%;
}

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

4

2 回答 2

0

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

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

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

希望这可以帮助

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

于 2013-07-14T17:29:43.257 回答
0

您是否希望内容 div 向下延伸以便将页脚推到窗口底部？你最好使用这样的东西：

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

如果正文不包含足够的内容，页脚仍将停留在底部。演示在这里。

于 2013-07-14T17:29:43.983 回答