8

我在一个容器中有两个 div:s。
第一个 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>
4

1 回答 1

21

display:table我可以使用and来实现这一点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;
}
于 2013-06-17T14:17:27.723 回答