html - 高度为 100% 的 2 列布局

Question

我有一个 2 列布局，高度均为 100%。问题是，当我向下滚动时，当包含内容的右列大于左侧内容时，菜单将位于左列的内容为空。

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;
    }

这是一个 Fiddle证明...

Answer 1

对你的问题的简短回答是，你必须将 body 和 html 标签的高度设置为 100%，然后在你想要使页面高度为 100% 的每个 div 元素上将高度设置为 100%，进一步检查以下链接:

Here和 Here

基本的是:

 .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;
}

希望对您有所帮助!