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

Question

我经历了许多帖子看，仍然不能得到这个工作...

我的目标是要风格的CSS（不使用JavaScript的），使DIV类的高度“两个”始终融入DIV类“容器”。

容器DIV的高度可能会改变，如窗口调整大小，这就是为什么我希望我的“两个”DIV能够相应地更改大小。因此，我将容器DIV高度设置为300像素，但它可以是像500像素等任何像素。

如果您需要更多说明，请让我知道。提前致谢！

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

您是否需要这样的：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; 
} 

Answer 2

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 3

添加“overflow：hidden;”到容器规则，如下所示：http://jsfiddle.net/pn9Qa/2/

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