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中的

文字可能比阻止本身大，因此应隐藏overflow:hidden

需要<span>内的

#down

Answer 1

添加：

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*/
}

demo here

修改

<强> CSS

#down { height:100%; max-height:290px; /* <-- this is missing*/ background:pink; overflow: hidden; float:left; }

2nd demo

Answer 2

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

如何使div占用所有剩余高度

2 个答案: