如何让css div延伸到100%的窗口

Question

我很难实现这一目标.我想要div content1并content2在一个设置了最小高度的窗口中垂直填充剩余的空间.

<style type="text/css">
body,td,th {
    font-family: Arial, Helvetica, sans-serif;
    height:100%;
}
body {
    background-color: #E1E1E1;
}
</style>
<style type="text/css">
.container {
    width: 965px;
    height: 100%;
    margin: 0 auto; 
    overflow: hidden;
}
.sidebar1 {
    float: left;
    width: 200px;
    background: none;
    padding-bottom: 10px;
} .content {
    padding: 10px 0;
    width: 380px;
    height: 100%;
    background: #fff;
    float: left;
    position: relative;
} .content2 {
    float: left;
    width: 380px;
    height: 100%;
    background: #fff;
    padding: 10px 0;
}
-->
</style>

这是我正在尝试调整大小的div(当前是空的,但我希望它们垂直填满窗口):

<div class="content" style="border-left: solid 1px #CCC;"></div>
<div class="content2"><!-- end .sidebar2 --></div>

Answer 1

你也需要在html标签上保持100%的高度

html { height: 100%; }

请参阅:http://jsfiddle.net/wJ73v/