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

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

希望，这有帮助！

2列布局，高度为100％

1 个答案: