正確設置一個父div和子div的百分比高度

我試圖弄清楚這一點，而不會在這裏弄得亂七八糟。我有一個容器分區然後在其中我有3個更多的divs左右漂浮。我的問題是，我的容器div有一個100％的高度風格。這樣正確設置一個父div和子div的百分比高度

.Container { 
height: 100%; 
min-width: 600px; 
overflow-y: hidden; 
}

和div容器（sidebar1）在我的孩子div的一個，（爲清楚起見虐待保持它只是一個DIV）有這個CSS。

border: 1px solid #E0E0DF; 
bottom: 10px; 
box-shadow: 2px 2px 4px #888888; 
float: left; 
height: 100%; 
overflow-y: scroll; 
width: 18%; 
    }

我添加使用我遇到jquery.The問題「清單」元素的sidedar1 DIV的是，我沒有真正得到滾動條出現，直到有喜歡3個或4個項目的過去查看，甚至當滾動條出現時，我無法一直向下滾動查看它們。我知道這對父母來說是100％身高，孩子也是100％。我不能看到側邊欄1滾動的底部，我有隱藏容器div的滾動條。做這個的最好方式是什麼？我想有容器div，基本上擴大了用戶屏幕的全長和寬度，沒有任何滾動條，然後在其中我想我的孩子div浮動左，但我不希望他們失去視圖，如果這使得任何感。我希望能夠在出現時看到完整的滾動條。在此先感謝米格爾

來源

2013-09-30 Miguel

問題是，你的容器是不知道它的孩子，因爲他們漂浮。使用容器上的clearfix解決方案來包含浮動，並且您應該正確地獲取滾動條。

要小心，因爲容器的內容將具有距邊界100％+ 2px的高度，因爲您將從第一個項目獲得滾動條。您可以通過將浮動元素上的框大小屬性設置爲邊框來解決此問題。

Clearfix主要思路：

.clearfix:after { 
    content: "."; 
    display: block; 
    clear: both; 
    visibility: hidden; 
    line-height: 0; 
    height: 0; 
}

一些鏈接：http://www.webtoolkit.info/css-clearfix.html

來源

2013-09-30 16:20:20 Tibos

抱歉愚蠢的問題，我加入了clearfix到父DIV，似乎我可以看到的結束的上半部分滾動條上的子div現在，但我仍然無法看到這一切我錯過了什麼？ – Miguel

您應該編輯問題以提供問題的活動簡化示例（使用JsBin，JsFiddle或其他專用服務）。沒有這個例子，恐怕我再也忍不住了。 – Tibos

會做。謝謝您的幫助。 – Miguel

正確設置一個父div和子div的百分比高度

回答

相關問題