1

私は次のレイアウトを持っています：（jsfiddle）

<!DOCTYPE HTML>
<html>
<body>

<div class="main_container">

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

    <div class="right_container">
    </div>

</div>

</body>
</html>​

CSS：

div.main_container {
    background: #000; 
    border: none;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    -khtml-border-radius: 15px;
    border-radius: 15px;
    width: 100%;
    min-height: 400px;
    margin: auto;
}

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

div.right_container {
    position: relative;
    margin-left: 220px;
    width: 715px;
    height: 100px;
    background: blue;
}

左側の（赤い）コンテナをメインコンテナの高さを満たすことができないようです。右側のコンテナのコンテンツにより、メインコンテナの高さが高くなる可能性があります（jQuery以外のソリューション）。

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

4

1 に答える 1

5

position:relativemain_container に設定します。

左の列にあるためheight:100%、その親と同じ高さになります。以前のコードでは、この要素の親はドキュメントでしたposition:absolute。コンテナに追加position:relativeすると、左の列の親になり、列の高さが親の高さに調整されます。

   div.main_container {
        background: #000;
        border: none;
        -moz-border-radius: 15px;
        -webkit-border-radius: 15px;
        -khtml-border-radius: 15px;
        border-radius: 15px;
        width: 100%;
        min-height: 400px;
        margin: auto;
        position: relative;
    }

http://jsfiddle.net/ETYzR/3/

于 2012-12-17T12:25:24.267 に答える