我在一个容器中有两个 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>
最佳答案
我可以使用 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 - 仅使用 CSS 填充剩余的 div-height，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17148624/