0

モバイル Web アプリ用の柔軟なレイアウトを作成しようとしていますが、これを CSS テーブルで機能させるのに苦労しています。現在、私は古いフレックスボックスを使用していますが、CSS テーブルでそれを複製しようとしました。常に 100% の高さのコンテンツ コンテナーを使用して、高さを固定したヘッダーを使用したいと考えています。

どこが間違っていますか？また、フレックスボックスはより良い選択肢でしょうか? （流動的ではありますが）

    -----------------------------
    |          .header          |
    -----------------------------
    |                           |
    |                           |
    |                           |
    |      .inner-container     |
    |                           |
    |                           |
    -----------------------------

.

（失敗した）cssテーブルの例 と、動作するフレックスボックスの例を作成しました

.

<div class='wrap'>    
    <div class='header'></div>
    <div class='inner-container'></div>
</div>



.wrap {
    display: table;
    overflow: hidden;  
    width: 100%;
    height: 100%;
    border: 1px solid;
}

.header {
    display: table-cell;
    background: red;
    height: 60px;
    width: 100%;
}

.inner-container {
    display: table-cell;
    background: blue;
    width: 100%;
    height: 100%;
}
4

1 に答える 1

1

まず、.headerと.inner-containerを表のセルとして表示しているため、それらは積み重ねられるのではなく、隣り合って表示されます。

wrapただし、ブラウザが高さを計算する方法が原因で、ピクセルの高さを on に設定しない限り、テーブルでやろうとしていることが難しいという主な問題があります。

このフィドルを見て、外側の div の高さを1000pxではなく に変更100%すると、適切なサイズが得られることに気付くでしょうがheight: 100%、

編集: これが発生する理由の詳細については、こちらを参照してください。

于 2013-09-25T03:53:49.137 に答える