Html 如何使一个div占据所有剩余高度

有很多这样的话题，但没有一个有我需要的答案

我有这种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>

#容器{宽度：300px；高度：290px；背景：黄色；}
#向上{宽度：100%；浮动：左侧；背景：绿色；}
#up2{宽度：100%；浮动：左侧；背景：蓝色；}
#向下{高度：100%；背景：粉红色；溢出：隐藏；浮动：左侧；}
asd
asd
asd
asd
Lorem ipsum dolor sit amet，是一位杰出的献身者。多奈克·萨吉提斯、尼塞尔·诺德格森·波特、无先兆马萨、无先兆舌苔。不，我只想说。矮慈姑。自由酒后驾车，nec精英权杖。毛里斯·奎斯·努克坐在阿梅特·普鲁斯·弗林利亚·乌拉姆科珀身边。毛里斯·埃吉特·鲁特姆扫描电镜。维内那提斯胡斯托朗卡斯大学泰勒斯帝国饮食学院的Phasellus molestie enim。
即食玉米饼。

我需要

#down

来占用

#up

和

#up2

#up

和

#up2

没有固定高度（如果它们有固定高度，有很多解决方案，但如果高度是动态的，我没有找到解决方案）

#down

中的文本可能比块本身大，因此应使用

溢出：隐藏

内部
#需要向下
添加：

html, body {
    height:100%;  /* <-- this is missing*/
    width:100%;  /* <-- this is missing*/

}
#container {
    width:300px;
    min-height:290px; /* <-- this is missing*/
    background:yellow;
    height:100%; /* <-- this is missing*/
}

html，正文{
高度：100%；/*是一个纯CSS解决方案：

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

CSS:（我已经清除了你的一些CSS）

*
{
保证金：0；
填充：0；
}
#容器
{
背景色：黑色；
高度：500px；/*或任何其他固定高度*/
}
#container:before/*我想你只能用JS来做这件事……这是你想要的吗？还是你想要的高度是文本的大小（可以改变）？我可能会使用JavaScript来进行计算。别认为这样做是不可能的。不过我总是很惊讶：）我有一个纯CSS的解决方案给你。我很快会发布一个答案。@lhan16-downHeight=containerHeigh-（upsight+up2Height）span inside#down可以超出它，overflow:hidden将隐藏它，但是#down不应该在这个示例中固定容器高度#down调整大小如果文本太大请看这里我修改了你的小提琴，只是将大小更改为我需要的大小并添加了更多文本你想隐藏文本吗？如果是这样的话：使用
overflow:hidden；
在
#container
上，我需要溢出：隐藏在#down而不是在container上，#down的高度在javascript中用于计算字符数，JS将文本剪切到#down div的可见区域，在您的示例中，最后一行是半可见的，我使用JS来避免这种情况
#down {
    height:100%;
    max-height:290px; /* <-- this is missing*/
    background:pink;
    overflow: hidden;
    float:left;
}

*
{
    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;
}