首页 文章

Twitter Bootstrap:容器中的div,高度为100%

提问于
浏览
101

使用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%;
}
  • 编辑*

我已按照下面的建议为填充类添加了高度 . 但是,问题在于我在主体上添加了一个填充顶部以考虑顶部的固定导航栏 . 这会影响"map" div的100%高度,这意味着会添加滚动条 - 如下所示:http://jsfiddle.net/S3Gvf/2/任何人都可以告诉我如何修复?

3 回答

相关问题