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

この例を考えてみましょう...

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

および指定された CSS3 コード:

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

absolute要素がheightまたは100% に設定されている場合、その要素は、デフォルトで、または要素widthとして最も近い親レイアウトに一致します。relativehtml

于 2014-10-14T09:36:52.570 に答える
0

#content-wrapブラウザーが高さを決定するため、親要素の高さの 100% に設定する#contentだけです。

#content{
    height:100%;
}

その高さに設定されていない場合は、後でこれをオーバーライドする css プロパティが設定されている可能性があります。

于 2013-08-10T20:27:09.727 に答える