1

私は次のものを持っています( jsfiddle ):

<div class="content_wrap">
    <div class="left_container">
    </div>

    <div class="right_container">
        <div style="background-color: blue; margin:20px; height: 1500px;"></div>
    </div>

    <div class="clearfix"></div>
</div>

</body>
</html>

CSS:

body,html {
    height: 100%;
    width: 100%;
    background-color: #f8f8f8;
}

div.content_wrap {
    width: 100%;
    height: 100%;
}

div.left_container {
    float:left;
    width: 220px;
    height: 100%;
    background-color: red;
}

div.right_container {
    position: relative;
    padding: 15px;
    padding-top: 100px;
    width: 1000px;
}

.clear { clear: both; }

私がやろうとしているのは、divs を並べて並べ、左側のバー (赤) をページの高さ、またはコンテンツが占める高さ (青) のいずれかまで伸ばすことです。より大きい (ここに示されているレイアウトのように)

現時点での私の問題は次のとおりです。右のコンテナのコンテンツ (青いボックスはコンテンツを示すためのものです) が左のコンテナの隣に正しく配置されていません。左のコンテナは、右のコンテナのコンテンツに従って高さを調整しません。

正直なところ、私はそれがどのように機能するかを完全には理解していませんが、明確な修正を加えました。

いくつかのガイダンスをいただければ幸いです。

4

3 に答える 3

1

このデモを参照してください：http：//jsfiddle.net/PaJ3r/9/ 更新されたCSSは次のとおりです。

body,html {
    height: 100%;
    width: 100%;
    background-color: #f8f8f8;
}

div.content_wrap {
    width: 100%;
    position: relative;
}

div.left_container {
    float:left;
    position:absolute;
    width: 220px;
    height: 100%;
    background-color: red;
}

div.right_container {
    position: relative;
    padding: 15px;
    margin-left: 220px;
    padding-top:100px;
    width: 1000px;
}

.clear { clear: both; }

position:relative左側のサイドバーをコンテンツの高さまで伸ばすには、indiv.content_wrapが必要です。
position:absolute;inをdiv.left_container使用すると、左側のコンテナをラッパーdivの高さに合わせることができます。左側のサイドバーを表示したままにdiv.right_containerするものがありますmargin-left: 220px;

于 2012-12-06T13:07:04.077 に答える
1

left divまず、適切なdivで成長できるように、divをネストする必要があります。

更新されたフィドルを見る

left divを設定せず、height100 min-heigth％に設定します。さらに、最後のビットを正常にするには、マージンとパディングをいじる必要があります

于 2012-12-06T13:04:32.330 に答える
1

この jsfiddleを見てください。

コメントはほとんどありません:私float: left;は両方divの s で使用しましたが、バートが言ったように、clearfix.

于 2012-12-06T13:04:21.283 に答える