小编rav*_*vax的帖子

我遇到了这个问题:

我有一个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)可滚动(仅上下,而不是从左到右!)？

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