css – Twitter Bootstrap:div在容器与100%的高度

前端之家收集整理的这篇文章主要介绍了css – Twitter Bootstrap:div在容器与100%的高度前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
使用twitter bootstrap(2),我有一个简单的页面与导航栏,在容器内我想添加一个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>@H_404_5@ 
 

当前CSS:

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

html,body {
    height: 100%;
}

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

>编辑*

我已经添加了填充类的高度如下所示。但是,问题是,我添加一个padding-top到身体,以解决顶部的固定导航栏。这会影响“地图”div的100%高度,意味着滚动条被添加 – 如所示:http://jsfiddle.net/S3Gvf/2/任何人都可以告诉我如何解决

解决方法

将类.fill设置为height:100%
.fill { 
    min-height: 100%;
    height: 100%;
}@H_404_5@ 
 

JSFiddle

(我把#map的红色背景,所以你可以看到它占据100%的高度)

原文链接:https://www.f2er.com/css/223623.html

猜你在找的CSS相关文章