如何使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; 
}