使用CSS填充剩余的div高度

Question

使用CSS填充剩余的div高度

cssfill

8

我在一个容器中有两个div。
第一个div应该自动调整高度，占用所需的所有空间。
第二个div应该占据容器剩余的高度。

我希望不使用Javascript完成这个任务。

难道没有纯CSS的解决方案吗？也许可以利用display:table/display:table-cell或display:flex来实现？

以下是一个无法正常工作的示例

<!DOCTYPE html>
<html>
<head>
<title>Stretch</title>
<style type="text/css">
    html { height: 100%; }
    body {
        padding: 0 0;
        margin: 0 0;
        height: 100%;
        background: grey;
    }
    #container { background: pink; }
    #autoHeight { background: blue; }
    #remainingHeight { background: green; }
</style>
</head>

<body>
    <div id="container">
        <div id="autoHeight">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
            sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
            nisi ut aliquip ex ea commodo consequat.</div>

        <div id="remainingHeight">This div should fill out the rest, making the display
            mainly green. And no, I don't mean to just have green background. It will
            contain other things.</div>
    </div>
</body>
</html>

- ANisus

1

可能是将div填充到剩余的屏幕空间的重复问题。 - Nate-Wilkins

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- ANisus · Accepted Answer

我可以使用 display:table 和 display:table-row 来实现这一点（不支持 IE7 及更早版本）。

http://cssdeck.com/labs/elars8pj

html { height: 100%; }
body {      
    padding:0 0;
    margin:0 0;
    height: 100%;
    background:grey;
}
#container {
    display:table;
    height:100%;
    width:100%;
    background:pink;
}
#autoHeight {
    display:table-row;
    background:blue;
}
#remainingHeight {
    display:table-row;
    height:100%;
    background:green;
}