Question

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

我的目标是仅设置css样式（没有javascript），以便DIV类“two”的高度始终适合DIV类“容器”。

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

如果您需要更多说明，请与我们联系。提前谢谢！

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

添加“overflow：hidden;”到.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;
}

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

3 个答案: