如何使div内容适合高度为100%的父div？

Question

我浏览了很多帖子,仍然无法让这个工作......

我的目标是仅设置css样式(没有javascript),以便DIV类"two"的高度始终适合DIV类"容器".

容器DIV的高度可能会像窗口调整大小一样改变,这就是为什么我希望我的"两个"DIV能够相应地改变大小.所以我在这里将容器DIV高度设置为300px,但它可以是任何px,如500px等

如果您需要更多说明,请告诉我.提前致谢!

http://jsfiddle.net/pn9Qa/

HTML

<div class='container'>
    <div class='top'>some text</div>
    <div class='bottom'>
        <div class='one'>header</div>
        <div class='two'>items here</div>
    </div>
</div>

CSS

.container
{
    height: 300px;
    width: 100%;
    border: 3px solid red;
}
.top
{
    height: 60px;
    width: 100%;
    background-color:pink;
    float:left;

}
.bottom
{
    width: 100%;
    height: 100%;
    background-color: green;
    float: left;
}
.one
{
    width: 100%;
    height: 30px;
    background-color: orange;
}
.two
{
    width: 100%;
    height: 100%;
    background-color: yellow;
    overflow: auto;
}

Answer 1

这是一个使用calc():

width: -webkit-calc(100% - 60px); /* note, the space is necessary */

这是一个使用 display: flex

display: -webkit-flex;
-webkit-flex-direction: column;

这是一个使用填充/边距和z-index:

box-sizing: border-box;
padding: 60px;
position: relative;
top: -60px;

然后,旧的,自己做一些数学版本.

使用前缀的简洁性.如果您需要查看哪些是必要的,请使用http://caniuse.com/.