CSS：強制孩子使用父（表單元格）高度

Question

#wrapper { 
    display: table; 
    min-height: 100%; 
    height: 100%; 
    margin: 0px auto; 
} 

#header-wrap, 
#content-wrap, 
#footer-wrap { 
    display: table-row; 
    height: 1px; 
} 
#content-wrap { 
    height: auto; 
} 

<div id="wrapper"> 
    <div id="header-wrap"></div> 
    <div id="content-wrap"> 
     <section id="content"></section> 
    </div> 
    <div id="header-wrap"></div> 
</div> 

#wrapper作爲一個表，其中#header-wrap，#content-wrap和#footer-wrap是TABEL細胞有助於推頁腳到頁面底部。

我怎樣才能得到部分#content填補#content-wrap的高度？

我不會使用絕對定位。

Answer 1

由於#content-wrap已經讓瀏覽器確定了身高，所以您應該做的就是將#content設置爲父元素高度的100％。

#content{ 
    height:100%; 
} 

如果它沒有被設置到那個高度，我猜測可能有一些css屬性被設置在稍後覆蓋這個。

Answer 2

考慮這個例子...

<div> 
    <p>Lorem ipsum dolor sit amet cosectetur...</p> 
</div> 

和給定的CSS3代碼：

div { 
    position: relative; 
} 
div>p { 
    height: 100%; 
    position: absolute; 
} 

當absolute元件被設置height或width至100％時，其將匹配最近的父layedout因爲默認爲relative或html元素。