1

HTML と CSS の経験があまりないので、ご容赦ください。

ページ全体を表す大きな画像が<div>あり、2 つの子要素を使用して 30% ～ 70% の比率の 2 つの部分に分割しました (左にナビゲーション メニュー、右にコンテンツを表示するため)。これはうまくいきます。

次に、左を 2 つの部分に分割する必要があります。下部は、コンテンツのサイズに合わせてサイズを調整する必要があります。上部は残りのスペースを取る必要があります。他の多くのSOの質問からの提案を実装しようとしましたが、必要なものを達成できませんでした.

注:上の div のコンテンツが大きくなると、一番上の div が一番下の div を食い尽くす代わりに、スクロールバーが表示されます。

既存の左右の列の CSS は次のとおりです。

.leftCol
{
    position: absolute;
    overflow: auto;
    right: 70%;
    left: 0;
    top: 0;
    bottom: 30px;
    background: #aabbcc;
}

.rightCol
{
    position:absolute;
    overflow: auto;
    left: 30%;
    right: 0;
    top: 0;
    bottom: 30px;   
    width: 70%;
    height: 100%;
}
4

3 に答える 3

0

divs左の内側にさらに2つ追加できますdiv

CSS:

    body {
        width: 100%;
        margin: 0 auto;
    }

    .leftCol {
        position: absolute;
        overflow: auto;
        right: 70%;
        left: 0;
        top: 0;
        bottom: 30px;
        background: #aabbcc;
    }

        .leftCol .leftTop {
            background: #ff6a00;
            height: 100%;
        }

        .leftCol .leftBottom {
            background: #b6ff00;
        }

    .rightCol {
        position: absolute;
        overflow: auto;
        left: 30%;
        right: 0;
        top: 0;
        bottom: 30px;
        width: 70%;
        height: 100%;
    }

HTML:

<div class="leftCol">
    <div class="leftTop">Top Left</div>
    <div class="leftBottom">Bottom LeftBottom LeftBottom LeftBottom LeftBottom LeftBottom LeftBottom LeftBottom LeftBottom LeftBottom LeftBottom LeftBottom LeftBottom LeftBottom LeftBottom LeftBottom LeftBottom LeftBottom LeftBottom LeftBottom LeftBottom LeftBottom LeftBottom Left</div>
</div>
<div class="rightCol">Right Column
</div>

http://jsfiddle.net/T4N66/

于 2013-11-08T02:59:33.977 に答える
0

これはどのように？http://jsfiddle.net/Z4K7J/

.right {
    border:1px solid orange;
    position:absolute;
    right:0;
    top:0;
    width:70%;
    height:100%;
}

.left {
    border:1px solid orange;
    position:absolute;
    left:0;
    top:0;
    width:25%;
    height:100%;
    display:table;
}

.top {
    display:table-row;
    height:100%;
}

.top .inner {
    background-color:red;
    height:100%;
    overflow-y:auto;
}

.bottom {
    display:table-row;
}
于 2013-11-08T02:59:49.647 に答える