html - CSS:强制 child 使用父(表格单元格)高度

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的高度?

我不会使用绝对定位。

Answer 1

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

#content{
    height:100%;
}

如果它没有设置到那个高度，我猜可能稍后设置了一些 css 属性来覆盖这个。