如何將元素的高度設置爲與其父級相同

Question

我在另一個「主要內容」中有一個名爲「content-left」的div。我想讓孩子的div取100％的父母身高。

#main_content { 
display: table; 
width: 99%; 
margin-left: auto; 
margin-right: auto; 
} 

#content-left { 
width: 250px; 
float: left; 
display: table-cell; 
padding-bottom: 8px; 
background-color: #F6F5F4; 
height: 100%; 
} 
#content-rightside { 
width: 782px; 
float: left; 
display: block; 
padding-left: 10px; 
} 

Answer 1

這是一個常見的問題，這裏是一個解釋如何實現自己的目標

http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

Answer 2

對於height: 100%; CSS規則的工作，元素的每家長必須列有一個明確的高度定義。這種類型的樣式表都可以工作：

html, 
body, 
#main-content, 
#left-column, 
#right-column 
{ 
    height: 100%; 
} 

#left-column 
{ 
    background-color: #ccc; 
    float: left; 
    width: 75%; 
} 

#right-column 
{ 
    background-color: #eee; 
    float: left; 
    width: 25%; 
} 

而且這裏有一個搗鼓你看：http://jsfiddle.net/txReR/

UPDATE

如果你想要的高度是基於內容，請使用display: table像所以：

#main-content 
{ 
    display: table; 
    width: 100%; 
} 

#left-column 
{ 
    background-color: #ccc; 
    display: table-cell; 
    width: 75%; 
} 

#right-column 
{ 
    background-color: #eee; 
    display: table-cell; 
    width: 25%; 
} 

這裏是更新的小提琴：http://jsfiddle.net/txReR/1/

請注意，這種方法的一個缺點是瀏覽器兼容性更多的是使用CSS表格的問題。