我遇到了这个问题：
我有一个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)可滚动(仅上下,而不是从左到右！)？
非常感谢您的反馈,我希望我们都能从中吸取教训.
解决方法
你应该将你的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的方法……可悲的是.
