Question

我在这里有一个测试网站，有两列，都有绝对定位。

http://dl.dropbox.com/u/17844821/zeug/heighttest.html

如您所见，左列的内容多于右列，因此会导致滚动条。由于我希望右列与左侧列的高度相同，因此我给它height: 100% css属性。

现在向下滚动，你会看到会发生什么。右栏扩展到浏览器窗口高度的100％，而不是整个网站的100％高度。

如何让两个div都达到100％全高？（已经尝试bottom: 0;为正确的div。将无效。）

注意： .wrapper 必须与position: absolute保持一致，因为这是我原始整个网站布局的要求。

Answer 1

你真的不需要“包装”，但是如果你把它留在里面，你也需要让它达到100％的高度。

html, body{
    height: 100%;
}

body{
    overflow: hidden;
}

.red{
    background: red;
}

.blue{
    background: blue;
}

.wrapper{
height:100%
}

.left{
    float: left;
    width: 50%;
    height:100%;
}

.right{
    float: right;
    height: 100%;
    width: 50%;
}

Answer 2

仅使用此：

body { overflow:auto; margin:0; }
.wrapper { display:table; width:100%; }
.left, .right { display:table-cell; width:50%; }

Answer 3

您可以使用表格来实现此目的。虽然我意识到有些人为数据表示以外的任何东西鄙视表格。

例如见dabblet： http://dabblet.com/gist/2238394

CSS

.red{
    background: red;
}

.blue{
    background: blue;
}

.wrapper{
    overflow: auto;
    width:100%;
}
td{
    vertical-align:top;
}

HTML

<table class="wrapper">
    <tr>
        <td class="red">
            foo<br>bar<br>foo<br>foo<br>bar<br>foo<br>foo<br>bar<br>foo<br>foo<br>bar<br>foo<br>foo<br>bar<br>foo<br>foo<br>bar<br>foo<br>foo<br>bar<br>foo<br>foo<br>bar<br>foo<br>foo<br>bar<br>foo<br>foo<br>bar<br>foo<br>foo<br>bar<br>foo<br>foo<br>bar<br>foo<br>foo<br>bar<br>foo<br>foo<br>bar<br>foo<br>foo<br>bar<br>foo<br>foo<br>bar<br>foo<br>foo<br>bar<br>foo<br>foo<br>bar<br>foo<br>foo<br>bar<br>foo<br>foo<br>bar<br>foo<br>foo<br>bar<br>foo<br>foo<br>bar<br>foo<br>foo<br>bar<br>foo<br>foo<br>bar<br>foo<br>foo<br>bar<br>foo<br>foo<br>bar<br>foo
        </td>
        <td class="blue">
            foo<br>bar<br>foo<br>foo<br>bar<br>foo<br>foo<br>bar<br>foo<br>foo<br>bar<br>foo<br>foo<br>bar<br>foo<br>foo<br>bar<br>foo<br>foo<br>bar<br>foo<br>foo<br>bar<br>foo<br>foo<br>bar<br>foo<br>foo<br>bar<br>foo<br>foo
        </td>
    </tr>
</table>

如何在CSS中给出div满高度

3 个答案: