2

100% レイアウトについて同様の質問がたくさんあると思いますが、最初に、この正確な問題を抱えているものを見つけることができませんでした。次に、なぜこれが起こっているのか知りたいです。

div と CSS を使用してリキッド レイアウトを作成しようとしています。私は CSS3 の利点を完全に自由に使用できます。最も重要なことは、可能な限り明確にしたいということです。

まず、ラッパーを作成し、その中に 100px の高さのヘッダーを作成しました。次に、幅 250 ピクセルのナビゲーション (25% も試しましたが、結果は同じです) と高さ 50 ピクセルのフッターを作成しました。他のすべての寸法は 100% であるか、CSS3 calc(100% - 150px) 関数を使用しています。問題は、ヘッダーの下の要素がビューポートに表示されないことです。少し実験して、要素を表示しましたが、コンテンツ div が他のすべての下に表示される (左側のパネルではなく) か、フッターがオーバーフローしたときにページの中央に固定される (絶対配置) などの問題があったため、それらのどれも機能せず、それらはすべてかなり汚れていました。

フロート、さまざまな寸法、列を別の div でラップしようとしましたが、それでも解決策が見つかりません。

これが私のコードです

HTML:

<header id="head"></header>
<div id="over">

    <nav id="side-nav"></nav>

    <div id="content"></div>

</div>
<footer id="main-foot"></footer>

CSS:

html, body {
    height: 100%;
    padding: 0px;
    margin: 0px;
    background-color: white;
}

#over {
    height: auto;
    min-height: calc(100% - 150px);
}

#head {
    height: 100px;
    width: 100%;
        background-color: #D1C5C5;
}

#side-nav {
    float: left;
    height: 100%;
    width: 250px;
    background-color: #AFAFC9;
}

#content {
    float: left;
    height: 100%;
    width: calc(100% - 250px);
    background-color: #AFC9B0;
}

#main-foot {
    clear: both;
    width: 100%;
    height: 50px;
}

上記のコードはいくつかの実験の結果であるため、見落としがある可能性がありますが、すべての一般的な解決策を試しました。

私はいくつかの絶対的なポジショニングを備えたソリューションを持っており、他の複雑なものをたくさん見つけることができると確信していますが、なぜこれがうまくいかないのか本当に興味があります.

より深い理解を持って喜んで助けてくれる人はいますか？

PS: IE6、7、8 などの非 CSS3 ブラウザーをサポートする必要はありません...

4

1 に答える 1

5

CSS を#over次のように変更するだけです。

#over {
    height: 100%; /* Instead of auto */
    min-height: calc(100% - 150px);
}

それはあなたの問題を解決するはずです。

JSFiddle

height : auto高さをそのコンテンツ、つまり子要素の高さとして設定します。
height : 100%親の高さを継承します。

したがって、ここでは#over、 の高さを計算し、#side-navこれ#contentは の高さに依存し#overます。

そして#side-navと に#contentはコンテンツがないため、すべての高さは です0。

したがって、この問題は、コンテンツが構築されるにつれて修正する必要があります。もう1つの解決策は、何らかの値を設定するmin-heightことです。#side-nav#contentpx

お役に立てれば。

于 2013-09-12T14:30:25.200 に答える