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

我一直在试图让div伸展到我的页脚，并取得了有限的成功。我已经使用jQuery做这个尝试，但仍存在一些问题：如何垂直拉伸div到页脚，并拉伸以适应内容？

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

我到处找，但不能找到解决这个。有人有主意吗？

来源

2013-07-14 user2581300

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

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

我已经更新了小提琴制作类似于你有什么布局的东西， http://jsfiddle.net/TCdsK/16/

希望这有助于

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

来源

2013-07-14 17:29:43 user2580076

@ user2581300，如果您有任何问题，请告知我 – user2580076

@ user2581300，请参阅编辑 – user2580076

@ user2581300，是否为您工作？ – user2580076

你是否想要内容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。

来源

2013-07-14 17:29:43 Ben

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

回答

相关问题