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

Question

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

我的目标是仅设置 CSS 样式（无 javascript），以便 DIV 类“二”的高度始终适合 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

Here's one using calc():

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

Here's one using display: flex

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

Here's one using padding/margins and z-index:

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

Then, the old, do some math yourself version.

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

Answer 2

添加“溢出：隐藏；”到 .container 规则，像这样：http://jsfiddle.net/pn9Qa/2/

.container
{
    height: 300px;
    width: 100%;
    border: 3px solid red;
    overflow: hidden;
}

Answer 3

你需要这个吗：http://jsfiddle.net/pn9Qa/1/

html, body { height: 100%; }

.container
{
    height: 100%;
    width: 100%;
    border: 3px solid red;
}
.top
{
    height: 100%;
    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;
}