如何垂直拉伸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到頁腳，並拉伸以適應內容？

回答

相關問題