CSS：强制子级使用父级（表格单元格）高度答案

【问题标题】：CSS: Force child to use parent (table-cell) heightCSS：强制子级使用父级（表格单元格）高度
【发布时间】：2013-06-01 07:07:09
【问题描述】：

#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的高度？

我不会使用绝对定位。

【问题讨论】：

标签： html css height sticky-footer css-tables

【解决方案1】：

考虑这个例子...

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

以及给定的 CSS3 代码：

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

当absolute 元素设置height 或width 为100% 时，默认情况下它会匹配最近的父布局为relative 或html 元素。

【讨论】：

【解决方案2】：

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

#content{
    height:100%;
}

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

【讨论】：