2

私が遭遇したタスクは標準に見えます：私は固定高さdivのコンテナとその中に3を持っています。div2番目を上と下の間に伸ばしてほしいdiv。2番目の内容がdivオーバーフローした場合-スクロールバーを表示したいと思います。

absolute私はポジショニングを使用してこのタスクを実行する方法を知っています。質問は次のとおりです。onを使用してそれを行うことはできtableますdivか？

追加の要件：可能であれば、ヘッダーの高さを固定に設定することは避けたいと思います。

私はそれをフィドルでコーディングしようとしましたが、ご覧のとおり、失敗しました。

CSS：

.container {
    height: 500px;
    background-color: gainsboro;
}

.table {
    display: table;
    height: 100%;
}

.table > div {
    display: table-row;
}

.table > div > div {
    display: table-cell;
    vertical-align: middle;
    border: 1px solid black;
    overflow: scroll;
}

.center > div {
    height: 100%;
}

.content {
    height: 700px;
}

HTML：

<div class="container">
    <div class="table">
     <div>
         <div>XXX</div>
     </div>
     <div class="center">
         <div>
             <div class="content"></div>
         </div>
     </div>
     <div>
         <div>YYY</div>
     </div>
    </div>
</div>
4

2 に答える 2

1

あなたのやり方は正しかった、いくつかの変更を加えるだけです（このフィドルを参照）：

html, body, .container, .table {
    margin: 0;
    height: 100%;
}

#header,#footer {
    height: 1px;
}

コンテンツで必要な場合はテーブルセルの高さが高くなるため、これは機能するはずです。

ヒント：全体を改善することができます。たとえば、HTML5と<header/>and<footer/>要素を使用します。しかし、それはあなたの質問の一部ではありませんでした。とにかく、ここにあなたのフィドルへの別のアップデートがあります：

 <div>
      <header>
          <div>XXX</div>
      </header>
      <main>
          <div>
              <div class="content"></div>
          </div>
      </main>
      <footer>
          <div>YYY</div>
      </footer>
 </div>

CSSの場合：

html, body, body > div {
    margin: 0;
    height: 100%;
}

body {
    background-color: gainsboro;
}

body > div {
    display: table;
    width: 100%;
}

body > div > * {
    display: table-row;
}

body > div > * > div {
    display: table-cell;
    vertical-align: middle;
    border: 1px solid black;
}

header, footer {
    height: 1px;
}

main疑問に思っているのであれば、HTML5は非常に新しいものです。

于 2013-03-15T15:41:09.127 に答える
1

考えられる解決策の1つは次のとおりです。

<div class="container">
    <div class="header">
        <div>Top Header Block</div>
    </div>
    <div class="center">
        <div class="content">
            <p>Lorem ipsum ...</p>
            <p>Lorem ipsum ...</p>
        </div><!-- .content -->
    </div><!-- .center -->
    <div class="footer">
        <div>Bottom Footer Block</div>
    </div>
</div>

およびCSS：

.container {
    height: 200px;
}
.header, .footer {
    background-color: gainsboro;
}
.center {
    height: inherit;
}
.content {
    background-color: #F0F0F0;
    height: inherit;
    overflow: auto;
}

コンテナの高さを固定しているので、.centerとの両方で高さを継承します.content <div>。

コンテナの高さを微調整すると、中央のdivは拡張されますが、ヘッダーとフッターのdivは同じ高さになります。

コンテンツdivで使用overflowして、スクロールできるようにします。

フィドルリファレンス： http： //jsfiddle.net/audetwebdesign/nae5z/

于 2013-03-15T15:58:06.670 に答える