javascript - 如何将 div 垂直拉伸(stretch)到页脚，并拉伸(stretch)以适应内容？

Question

我一直在尝试将 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 正在执行它的工作并完美地拉伸(stretch) #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

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

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

我已经更新了 fiddle ，使布局与您所拥有的类似， http://jsfiddle.net/TCdsK/16/

希望对你有帮助

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