CSS：如何让子元素使用父元素（table-cell）的高度？

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 是表格单元格，它们有助于将页脚推到页面底部。

如何使 #content 填充 #content-wrap的高度？

我不会使用绝对定位。

- Nahydrin

Answer 1

考虑这个例子...

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

给定的CSS3代码：

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

当一个绝对定位的元素设置了高度或宽度为100%，它将默认与最近的父元素（默认为相对定位或html元素）匹配布局。

- Salathiel Genèse

Answer 2

由于 #content-wrap 让浏览器确定高度，所以您只需要将 #content 设置为父元素高度的 100%。

#content{
    height:100%;
}

如果它没有被设置为那个高度，我猜测可能是后面设置了一些覆盖此属性的CSS属性。

- John Woodruff