我有两个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>
ANi*_*sus 21
我可以使用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;
}
| 归档时间： |
|
| 查看次数： |
16247 次 |
| 最近记录： |