2

高さ 100% の 2 列のレイアウトがあります。問題は、コンテンツのある右側の列が大きい場合、下にスクロールするとメニューが左側の列になる左側のコンテンツが空になることです。

HTML:

<div id="container">
        <div id="left">
            <br /><p>test test test</p>
            <br /><p>test test test</p>
            <br /><p>test test test</p>
        </div>
        <div id="right">
            <br /><p>test test test</p>
            <br /><p>test test test</p>
            <br /><p>test test test</p>
            <br /><p>test test test</p>
            <br /><p>test test test</p>
            <br /><p>test test test</p>
            <br /><p>test test test</p>
            <br /><p>test test test</p>
            <br /><p>test test test</p>
            <br /><p>test test test</p>
            <br /><p>test test test</p>
            <br /><p>test test test</p>
        </div>

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

    </div>

CSS:

    html {
             height:100%;
    }

    body {
        height:100%;
        margin:0;
        padding:0;
    }

    #container {
        height:100%;
    }

    #left {
        float:left;
        width:200px;
        background-color:blue;
        min-height: 100% !important;
    }

    #right {
        margin:0 0 0 0px;
        background-color:red;
        width:1000px;
        min-height: 100% !important;
        float:left;
    }

    .clearfix {         
        clear: both;
    }

そして、ここにデモンストレーションするフィドルがあります...

4

1 に答える 1

0

あなたの質問に対する簡単な答えは、body と html タグに 100% の高さを設定し、ページの高さを 100% にしたい各 div 要素で高さを 100% に設定し、リンクの下をさらに確認する必要があるということです。 :

ここと ここ

基本的なものは次のとおりです。

 .table{
    display: table;
    border-spacing: 12px;
}

.row {
    display: table-row;
    margin-bottom: 0;
    margin-top: 12px;
    width: 100%;
}
.cell1 {
    display: table-cell;
    width: 49%;
    margin-right: 1%;
    border: 1px solid #CCC;
    margin: 12px;
}
.cell2 {
    display: table-cell;
    width: 49%;
    margin-left: 1%;
    border: 1px solid #CCC;
    margin 12px;
}
.inner {
    padding-left: 12px;
    padding-right: 12px;
}

それが役に立てば幸い ！

于 2013-11-05T23:26:54.370 に答える