如何使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.