CSS:扩展div以适应整个页面

Question

我试图找到一种方法来扩展a div以适应页面的其余部分,而不使用JavaScript.

我写的一些代码开头:

HTML:

?<div class="bodyContainer">
    <div class="sidebar"></div>
    <div class="container"></div>
</div>  

CSS:

.bodyContainer {
 border: 1px solid black;
 width: 100%;
 min-height: 50px; 
 height: 100%;    
}

.sidebar {
    height: 100%;
}

.container {
    height: 100%;
}

上面的代码没有扩展div到适合页面的其余部分.

我也开始JSFiddle看看会发生什么.链接:JSFiddle

Answer 1

您还需要为html和body元素添加高度和宽度:

html, body
{
    height: 100%;
    width: 100%;
}

http://jsfiddle.net/Kyle_/BwVWx/4/