两个div在顶部相互操作,精确高度100%+低div可滚动

Question

我遇到了这个问题:

我有一个div(#container),它包含两个div.容器的高度应该是100%,不管这个div的内容是什么 - 不少于更多.

在这个div里面我想要两个全宽的div在彼此之上:

• (#upper)div的内容自动确定其高度.
• (#lower)div的内容应该是可滚动的,但只能是垂直的.它的高度取决于(#upper)的高度:100% - (#upper)height =(#lower)height

目前我有以下css ...

body {
    margin:0;
    padding:0;
    }
#container 
    {
    position: relative;
    width: 500px;
    height: 100%;
    max-height: 100%;
    background-color: #f00;
    }
#upper { 
    width: 100%;
    background-color: #0f0;
    }
#lower {
    width: 100%;
    background-color: #00f;
    overflow: auto;
}

......以及这段代码:

<div id="container">
<div id="upper"></div>
<div id="lower"></div>
</div>

(#container)的高度如何正好100% - 与其内容无关？现在由于(#upper)和(#lower)的组合内容,高度变得更大了？

如何(#lower)可滚动(仅上下,而不是从左到右!)？

非常感谢您的反馈,我希望我们都能从中吸取教训.

Answer 1

您应该将html和body元素的高度设置为 100%，以便您的子 div 知道百分比的基础。就像这样：

html, body {
    height:100%;
    width:100%;
}

将您的容器更改为：

#container 
{
    width: 500px;
    height: 100%;
    background-color: #f00;
}

至于你的滚动问题，你已经差不多了。将代码更改为以下内容：

#lower {
    width: 100%;
    height:100px;
    background-color: #00f;
    overflow-y: auto;
}

为了使其发挥最佳效果，请在下部 div 上设置固定高度，这样可以轻松地使可滚动操作发挥最佳效果。

编辑：

我意识到我误读了你的问题。您想让较低的 div 填充窗口的剩余高度。下面是如何在 jquery 中执行此操作：

var top = $('#upper').height();
var remaining_height = parseInt($(window).height() - top); 
$('#lower').height(remaining_height); 

我仍然没有找到只用 CSS 来做到这一点的方法......可悲的是。