如何使div占据可用高度
[英]How to make the div occupy the available height
问题描述
我正在使用bootstrap框架，因此在构建div时，如果我给出的高度为32em。 它非常适合放在一部手机中，但是当选择更大尺寸时。 div不会占据底部的剩余高度。 更换手机后如何使其占据底部的剩余高度？
请注意，div位于流体容器下方，并且是该容器中的最后一个div。 代码就是这样。
<style>
.box{
height: 32em;
background: grey;
}
</style>
<div class="container-fluid">
<div class="row box"></div>
</div>
4 个解决方案
解决方案1
1 2015-11-17 07:03:48
请检查下面的代码段
.container-fluid { height: 150px; background-color: red; width: 100%; overflow: hidden; } .box { height: 100%; background-color: blue; width: 50%; display: block; } .small-box { width: 75%; height: 50px; background-color: green; }
<div class="container-fluid"> <div class="small-box"></div> <div class="box"></div> </div>
解决方案2
1 已采纳 2015-11-17 07:17:44
那这个演示呢
<link rel="stylesheet" type="text/css" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<body>
<div class="navbar navbar-fixed-top">
<!-- Rest of nav bar chopped from here -->
</div>
<div class="container fill">
<div id="map"></div> <!-- This one wants to be 100% height -->
</div>
</body>
#map {
width: 100%;
height: 100%;
min-height: 100%;
background: red;
display: block;
}
html, body {
height: 100%;
}
.fill {
min-height: 100%;
height: 100%;
}
解决方案3
0 2015-11-17 08:12:05
这里还有一个解决方案
html, body { height: 100%; margin: 0px; } .container-fluid { display: table; width: 100%; height: 100%; } .row { display: table-row; width: 100%; } .box { display: table-cell; background: grey; }
<div class="container-fluid"> <div class="row box"> </div> </div>
您也可以在myblog中找到此解决方案
解决方案4
-1 2015-11-17 07:06:59
您的html似乎没有带有“ box”类的div！ 并尝试使用min-height而不是仅仅height属性。
如何制作 <div> 占满 <td>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.