100％Div高度問題

我有兩個容器（main-container和sub-container）。 body，HTML和主容器的高度爲100%，sub-container固定在1000px。即使sub-container大或小，主容器在整個屏幕上的高度應與100%相適應。現在的問題是，主容器不是根據子容器高度增加其高度。請檢查下面的示例以瞭解我的要求。100％Div高度問題

真的很感謝你的幫助。

謝謝

來源

2012-05-26 Awais Imran

是this你試圖實現什麼？

我改變了.sub-container的寬度，以便像.main-container那樣在%之間。

CSS標記：

html, body { 
    height:100% 
} 
.main-container { 
    height:100%; 
    background:red; 
} 
.sub-container { 
    height:100%; 
    width:75%; 
    margin:0 auto; 
    background:blue; 
}

希望它能幫助！

來源

2012-05-26 14:36:42 Luis

不，如果您在http://jsfiddle.net/awaises/dLeHL/上向下滾動，您會注意到紅框在藍框後面被切掉。我希望紅盒子可以根據藍盒子的高度靈活調整，並且100％垂直貼合在屏幕上，甚至是小盒子或大盒子的藍盒子。 –

哦，我沒有更新代碼，抱歉，它現在在那裏 – Luis

爲了使HTML 100％做到了這一招......感謝luis – Ravi

變化height:100%;到min-height:100%;在.main-container：http://jsfiddle.net/dLeHL/3/

編輯：

百分比高度規則解釋here：

百分比高地如果一個元素的高度設定爲一個百分比，它的父元素需要設置高度。換句話說，父元素的高度不能設置爲auto。像許多CSS的一樣，起初有點混亂。

來源

2012-05-26 14:41:25 Helstein

感謝您的回覆。但是當我在.sub容器中將高度1000px更改爲100％時，它消失了。任何解決方案 –

您不需要爲.main-container設置height（默認情況下它將展開爲子容器的大小）。通過將高度設置爲100％，您可以強制它成爲屏幕的高度，而不再是更高。因此，只要將其更改爲：

.main-container { background:red; }

如果您需要的主容器總是至少是屏幕的高度，用@設置min-height至100％，而去除height設置Helstein的建議。

來源

2012-05-26 14:45:38

100％Div高度問題

回答

相關問題