事業部的高度和背景顏色

Question

我曾嘗試overflow和使用clear: both;，但我不能讓孩子的div高度是相等的，我不想高度是靜態的。有人可以幫我實現這個目標嗎？

這裏是fiddle顯示的問題。

Answer 1

既然你似乎有靜態的寬度，但你不想靜態的高度，你可以通過容器div設置爲position: relative;，然後有一個左浮動div修復它，並定位其他div的絕對。像這樣的東西jsFiddle。

的一個浮動div將確保container div具有高度，並且所述絕對定位div的會自動調整到相同的高度浮動div。然後，您就必須設置絕對定位div的overflow-y: auto保證，如果他們的高度超過浮動div的高度滾動條就會出現他們的內部。這應該適用於所有瀏覽器。

div.container { 
    position: relative; 
    width: 800px; // height will be determined by the content of div.left 
} 
div.left { 
    float: left; 
    width: 400px; // height will be determined by its content 
} 
div.middle, div.right { 
    position: absolute; 
    overflow-y: auto; 
    width: 200px; 
    bottom: 0px; // These two lines will ensure that this div's height 
    top: 0px;  // is equal to the height of div.left and div.container 
    left: 400px; // Value should be equal to the width of div.left 
} 
div.right { 
    left: 600px; // Value is the sum of the width of div.left and div.middle. 
} 

P.S.如果你想要的是爲background-color充滿整個容器div（如您的文章標題所暗示的），你可以只設置容器div上background-color。

Answer 2

那麼，實現這一目標沒有JavaScript的最好方法是使用CSS3靈活的佈局

#newTask .body { 
    display: -webkit-flex; 
    -webkit-flex-direction: row; 
} 

這樣的事情，但前綴您正在使用的瀏覽器。

Answer 3

您可以在#newtask .body上使用display: table;，然後在所有子div（左，中，右）上使用display: table-cell;。

這將使它像一個表，將確保所有div都是大小相等的。

#newtask .body { 
display: table; 
} 

#newtask .body > div { 
display: table-cell; 
height:100%; 
} 

小提琴：http://jsfiddle.net/mv46q/1/