Bootstrap：在导航栏下填充整个容器减去导航栏高度答案

【问题标题】：Bootstrap: Fill whole container under navbar minus navbar heightBootstrap：在导航栏下填充整个容器减去导航栏高度
【发布时间】：2013-03-28 04:41:03
【问题描述】：

在使用 Twitter Bootstrap 样式并使用 navbar 的页面上，我想用 Google Maps 地图填充导航栏下方的整个容器。为此，我在下面添加了 CSS。

我将html 和body 元素的大小定义为100%，以便用于地图的大小定义。然而，这种解决方案会产生一个问题：

地图的高度现在与整个页面的高度相同，这会产生一个滚动条，我可以滚动导航栏添加的 40 像素。如何将地图的大小设置为导航栏的100% - 40px？

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

#map img {
        max-width: none;
}

html, body {
        height: 100%;
        width: 100%;
}

.fill { 
        height: 100%;
        width: 100%;
}

.navbar {
        margin-bottom: 0;
}

为了完整的 HTML：

<!DOCTYPE html>
<html lang="en">
        <head>
                <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
                <!-- Stylesheets -->
                <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
                <link rel="stylesheet" type="text/css" href="css/core.css">
        </head>
        <body>
                <div class="navbar">
                        <div class="navbar-inner">
                        </div>
                </div>
                <div class="container fill">
                        <div id="map"> 
                        </div>
                </div>
        </body>
</html>

【问题讨论】：

标签： html css twitter-bootstrap size

【解决方案1】：

你可以用绝对定位来解决这个问题。

.fill {
    top: 40px;
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute;
    width: auto;
    height: auto;
}

Demo (jsfiddle)

您还可以制作导航栏.navbar-fixed-top，并以某种方式在#map 元素内添加填充或边距。

【讨论】：

我说得对吗，这样一来，应用程序不再响应，因为 Bootstrap 将其菜单切换到绝对定位的地图 div 上？
@JürgenZornig 响应不是绝对的状态。如果这适用于您在更小/更宽的屏幕上的布局，那么它就是响应式的。如果没有，请输入几个媒体查询并使其符合您的需求。
是的，我同意你的观点，但是如果我将 div 绝对置顶 40px，当我打开导航栏菜单时，小屏幕上的标准引导菜单行为将与我的 div 重叠。抱歉，我只是想找出这个答案适合我的布局需求。只是用另一种方式解决了它（使用位置：静态）
@JürgenZornig 你能和position: static;分享你是如何解决它的吗？
我使用了 Sherbrow 的小提琴来创建一个包含地图的演示：jsfiddle.net/wrv369/hy14wepf