css - 可以增加/减少自高度度的 <div>

Question

我想创建一个 <div> (此处称为 div1)将其自高度度扩展到浏览器高度的限制(即最大高度，直到它会产生 scrollbar 溢出):

<div id="div1"> </div>
<div id="div2">Bonjour </div>

这是CSS:

#div2 {
   height: 300px;
   background-color: #ccffcc;
}

#div1 {
   height: 80px; // what should I do here in order to maximize the height until overflow?
   background-color: #cc00cc;
}

如何将div1的高度增加到最大可能的高度？

这是一个现场演示:http://jsfiddle.net/XAjGM/2/ .

Answer 1

这可以是您的 css，以便您可以实现所需。

html,body{
height:100%;
}

#div2 {
    height: 300px;
    background-color: #ccffcc;
}

#div1 {
    height: calc(100% - 300px); //where 300px is the height of div2
   background-color: #cc00cc;
}