html - 如何让一个div占据所有剩余的高度

Question

类似这样的题目很多，但没有一个是我需要的答案

我有这种 HTML/CSS 代码

<style>
#container {width:300px;height:290px;background:yellow;}
#up {width:100%;float:left;background:green;}
#up2 {width:100%;float:left;background:blue;}
#down {height:100%;background:pink;overflow: hidden;float:left;}
</style>

<div id="container">
    <div id="up">asd<br>asd</div>
    <div id="up2">asd<br>asd</div>
    <div id="down">
        <span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sagittis, nisl non dignissim porttitor, nulla metus pretium massa, non pretium ligula tellus sed justo. Donec quis justo lectus. Pellentesque sagittis egestas metus eget pharetra. Phasellus cursus libero dui, nec scelerisque elit lobortis ut. Mauris quis nunc sit amet purus fringilla ullamcorper. Mauris eget rutrum sem. Phasellus molestie enim at tellus imperdiet, ut venenatis justo rhoncus.
 consequat tortor ornare tempus.
        </span>
    </div>
</div>

我需要 #down在#up之后占用所有剩余空间和 #up2

#up和 #up2没有固定高度(如果它们有固定高度，有很多解决方案，但如果高度是动态的，我没有找到解决方案)

#down 中的文本可以比 block 本身大，所以它应该用 overflow:hidden 隐藏

<span>里面#down是必需的

Answer 1

Here是纯 CSS 解决方案:

我正在使用伪元素让 div 占用剩余的容器空间。如果您需要，我会解释它是如何工作的。

CSS:(我已经清除了您的一些 CSS)

*
{
    margin: 0;
    padding: 0;
}
#container
{
    background-color: black;
    height: 500px; /*Or any other fix height*/
}
#container:before  /* <--- new */
{
    content: '';
    float: left;
    height: 100%;
}
#up
{
    background:green;
}
#up2
{
    background:blue;
}
#down
{
    background:pink;
}
#down:after /* <--- new */
{
    content: '';
    clear: both;
    display: block;
}