html - 2 列布局，100% 高度

Question

我有一个 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;
    }

这是一个小提琴来演示......

Answer 1

对您的问题的简短回答是，您必须将 100% 的高度设置为 body 和 html 标签，然后将每个 div 元素的高度设置为 100%，以使页面高度为 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;
}

希望能帮助到你 ！