1

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

我的目标是仅设置 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;
}
4

3 回答 3

5

这是一个使用calc()：

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

这是一个使用display: flex

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

这是一个使用 padding/margins 和 z-index：

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

然后，老的，自己做一些数学版本。

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

于 2013-07-31T21:30:02.440 回答
2

添加“溢出：隐藏；” 到 .container 规则，如下所示：http: //jsfiddle.net/pn9Qa/2/

.container
{
    height: 300px;
    width: 100%;
    border: 3px solid red;
    overflow: hidden;
}
于 2013-07-31T21:41:00.653 回答
0

你需要这个：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;
}
于 2013-07-31T21:23:56.277 回答