2

高さや幅の要素が固定されていない流動的なレイアウトを作成しようとしています。私のページの本文は 3 つの列に分割されています (すべての列を同じ高さにしたいので、css テーブルを使用することにしました)。ただし、100% の高さのプロパティをテーブル div (またはテーブル セルの div) に追加しようとすると、div.middle のフル サイズに拡張されません。完全なコードhttp://jsfiddle.net/3NMw5/を使用して、この質問の JS フィドルを作成しましたが、ここにスニペットがあります。

<body>
    <div class='titleBar'>
        <div class='wrap'>
            <img src='../images/logo.png' />
        </div>
    </div>
    <div class='middle'>
        <div class='wrap mainContent'>
                <div class='leftColumn'>left here</div>
                <div class='center'>center</div>
                <div class='rightColumn'>right</div>
        </div>
    </div>
    <div class='footerBar'><div class='wrap'>footer</div></div>
</body>

そしてCSS：

div.mainContent { display: table; height: 100%;}
div.leftColumn { width: 20%; display: table-cell; background-color: #D2B48C; margin: 0; padding: 0;}
div.rightColumn {width: 20%; display: table-cell;}
div.center {width: 60%; display: table-cell;}
4

1 に答える 1

4

height: 200px;mainContent に追加してみてください。

div.mainContent {
display: table;
height: 200px;
}

コードの jsFiddle は次のとおりです。

追加height: 100%;も機能するはずです。

あなたの問題は、列が最大の高さまで伸びていないことではなく、mainContent が完全に伸びていないことでした。

--

EDIT：さて、コンテナを流動的にしようとすると、実際の問題が発生します。これは、ブラウザーが幅よりも高さを計算するのが難しいためです。

この問題は、親要素に高さが設定されていない要素にパーセンテージの高さを設定すると発生します。つまり、親要素にはデフォルトの高さ auto; があります。実際には、未定義の値から高さを計算するようブラウザに要求しています。これは null 値に等しいため、ブラウザは何もしません。

div の高さを相対的な高さに定義するには、親要素の高さも設定する必要があります。

に追加height: 100%すること.middleで、求めているものに近いものが得られます。こちらの jsFiddle を参照してください。

高さの問題について詳しくは、こちらをご覧ください。

于 2012-12-17T05:57:15.207 に答える