logo标签列表

Bootstrap：填充导航栏下方整个容器，减去导航栏高度。

htmlcsstwitter-bootstrapsize
13

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

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#map {
  height: calc(100% - 40px);
}

我为 html 和 body 元素定义了 100% 的尺寸，这样可以用于地图的尺寸定义。这种解决方案会导致一个问题：

地图的高度现在与整个页面的高度相同，这会导致滚动条可滚动导航栏所增加的 40px。如何将地图的大小设置为导航栏的 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>
1个回答
25

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

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

你也可以将导航栏设置为 .navbar-fixed-top，并在 #map 元素内部添加填充或边距。

演示（jsfiddle）

我对吗？这样做的话，应用程序就不再具有响应性了，因为Bootstrap会在绝对定位的地图 div 上切换菜单。 - Jürgen Zornig
@JürgenZornig 反应能力不是绝对的状态。如果它在较小/较宽屏幕上适用于您的布局，则它是响应式的。如果不适用，请添加一些媒体查询并使其符合您的需求。 - Sherbrow
是的，我同意你的观点，但如果我将一个Div绝对定位在顶部40像素处，在较小的屏幕上，标准的Bootstrap菜单行为会在打开导航栏菜单时重叠我的div。抱歉，我只是想找出这个答案是否符合我的布局需求。我已经用另一种方式解决了它（使用Position:static）。 - Jürgen Zornig
@JürgenZornig，你能分享一下你是如何使用 position: static; 解决它的吗？ - Jack Lu
我fork了Sherbrow的fiddle，创建了一个包含地图的演示：http://jsfiddle.net/wrv369/hy14wepf/ - iCode
我可以使用 Bootstrap 响应式地处理此内容，因为导航栏在所有设备上都有固定高度（56px）。我所做的就是将 .navbar 的 z-index 设置为 1，以便它可以上下覆盖在地图上。 - Sam Murphy
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接