Question

我在容器中有两个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>

Answer 1

我可以使用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;
}

仅使用CSS填写剩余的div高度

1 个答案: