Question

我有一个看似简单的CSS问题，但很难实现。我有2个div，一个在另一个上面。我希望两个div的组合高度为100％，但顶部是静态定义的高度。底部div将包含一个将溢出滚动的数据列表。实现这一目标的最佳方法是什么？下面是关闭内容的示例代码。

#container{
    height:auto;
    height:100%;
    min-height:100%;
}

#top{
    height:175px;
    min-height:175px;
    max-height:175px;
}

#bottom{
    height:70%;
}

<div id="container">
    <!-- top div set to 100px -->
    <div id="top"></div>
    <!-- bottom div dynamic height based on remaining real estate -->
    <div id="bottom"></div>
</div>

Answer 1

您可以使用CSS calc()，因此#bottom {height:calc(100% - 175px);}。

html, body {
    height:100%;
    margin:0;
}
#container {
    height:100%;
}
#top {
    height:175px;
    background:lime;
}
#bottom {
    height:calc(100% - 175px);
    background:teal;
}

<div id="container">
    <div id="top">top</div>
    <div id="bottom">bottom</div>
</div>

如果您需要支持更多浏览器，请使用CSS表格布局。

html, body {
    height:100%;
    margin:0;
}
#container {
    height:100%;
    width:100%;
    display:table;
}
#top, #bottom {
    display:table-row;
}
#top {
    height:175px;
    background:lime;
}
#bottom {
    height:100%;
    background:teal;
}

<div id="container">
    <div id="top">top</div>
    <div id="bottom">bottom</div>
</div>

Answer 2

您可以使用height:calc(100% - 175px);：

http://jsfiddle.net/9ygz4pnj/

html,body,#container{
    height:100%;
}

#top{
    height:175px;
    border:1px solid red;
}

#bottom{
    height:calc(100% - 175px);
    border:1px solid green;
}

Answer 3

您可以通过在容器上定义高度和最小高度来实现此目的。

首先，你需要定义一个高度：你体内的100％（和html）。比你需要创建一个容器div，它将是你的顶部和底部div的母亲。比使用位置：相对和最小高度：容器div中的100％。

您可以将顶部div对齐到顶部：0和左：0确定高度和位置绝对值。您可以将底部div对齐到底部：0和左：0表示计算功能和绝对位置。对于底部div中的内容滚动部分，请使用溢出滚动。

JSFiddle Example

现在，我正在使用法语（或德语键盘），这对我来说很难使用。当我回到家时，我会用更有意义的文字编辑答案。

这是您可以使用的基本css文件。

html, body { height: 100%; margin:0; }

.container {
    position: relative;
    min-height: 100%;
}

.top {
    background: black;
    color: white;
    height: 200px;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    background: yellow;
    height: calc(100% - 200px);
    overflow: scroll;

}

Multi div组合高度100％，一个div与静态高度

3 个答案: