Question

我正在使用bootstrap框架，所以在构建div时，如果我将高度设置为32em。它完全适合一部手机，但选择时尺寸更大。 div不占据底部的剩余高度。 如果更换手机，如何让它占据底部的剩余高度？

请注意，div位于流体容器下，是该容器中的最后一个div。代码是这样的。

<style>
.box{
    height: 32em;
    background: grey;    
   }

</style>

<div class="container-fluid">
  <div class="row box"></div> 
</div>

Answer 1

请检查下面的代码段

＆＃13;

.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;
}

＆＃13;

<div class="container-fluid">
  <div class="small-box"></div>
  <div class="box"></div>
</div>

＆＃13;

Answer 2

这个demo

怎么样？

<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%;
}

Answer 3

此处还有一个解决方案

＆＃13;

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;
   }

＆＃13;

<div class="container-fluid">
    <div class="row box">
    </div>
</div>

＆＃13;

您也可以在myblog

中找到此解决方案

Answer 4

你的html似乎没有任何div与类'框'！并尝试使用min-height而不仅仅是height属性。

如何使div占用可用高度

4 个答案: