5
#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高度?

我不会使用绝对定位。

4

2 回答 2

0

由于#content-wrap浏览器已经确定了高度,因此您只需将其设置#content为父元素高度的 100%。

#content{
    height:100%;
}

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

于 2013-08-10T20:27:09.727 回答
0

考虑这个例子......

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

和给定的 CSS3 代码:

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

当一个absolute元素设置为heightwidth100% 时,它会默认匹配最近的父布局为relativeorhtml元素。

于 2014-10-14T09:36:52.570 回答