Twitter Bootstrap：100％容器高度的容器

使用twitter引导（2），我有一个简单的页面导航栏，并在container内我想添加一个100％高度的div（到底部的屏幕）。我的css-fu很生锈，我无法解决这个问题。Twitter Bootstrap：100％容器高度的容器

简单的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%; 
}

编辑*

如下建议我增加高度，以填充类。但是，问题在于我在主体上添加了一个填充顶部来解释顶部的固定导航栏。这会影响“地图”div的100％高度，并且意味着滚动条被添加 - 如下所示：http://jsfiddle.net/S3Gvf/2/任何人都可以告诉我如何解决？

来源

2012-07-26 Matt Roberts

所以你只是想在所有方向拉伸该div？ – 2012-07-26 21:04:15

是的，我希望它填写导航div – 2012-07-27 22:17:11

设置类.fill到height: 100%

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

JSFiddle

（我把一个红色的背景#map所以你可以看到它占据了100％的高度）

来源

2012-07-26 21:07:16 Horen

后留下的空间谢谢，稍后再尝试并报告回来。不能相信我错过了那个简单的修复:) – 2012-07-27 12:38:08

谢谢，这类作品，但twitter bootstrap导航，这是固定的位置，使地图底部 - 你需要滚动到底部。我不知道如何使div跨度到整个可用屏幕空间减去导航栏。 – 2012-07-27 22:16:32

你可以将你的导航栏添加到jsfidlle，这样我就可以看到问题了吗？ – Horen 2012-07-28 00:35:03

你需要添加填充-top to“fill”element，plus add-size：border-box - sample here bootply

来源

2015-08-17 13:34:33 mamezito

Twitter Bootstrap：100％容器高度的容器

回答

相关问题