Twitter Bootstrap：容器中的div高度为100％

小编典典

Twitter Bootstrap：容器中的div高度为100％

css

使用twitter
bootstrap（2），我有一个带有导航栏的简单页面，并且container我想在其中添加100％高度的div（到屏幕底部）。我的css-
fu生锈了，我无法解决。

简单的HTML：

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

当前的CSS：

#map {
    width: 100%;
    height: 100%;
    min-height: 100%;
}

html, body {
    height: 100%;
}

.fill { 
    min-height: 100%;
}

编辑*

我将高度添加到填充类，如下所示。但是，问题是我在主体上添加了padding-top以解决顶部的固定导航栏。这会影响“地图”
div的100％高度，并意味着添加了滚动条

阅读 320

2020-05-16

共1个答案

小编典典

将课程设置.fill为height: 100%

.fill { 
    min-height: 100%;
    height: 100%;
}

（我将其设置为红色背景，#map以便您看到它占据了100％的高度）

2020-05-16