Html Bootstrap：在导航栏减去导航栏高度下填充整个容器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11930307/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap: Fill whole container under navbar minus navbar height
提问by Mahoni
On a page styled with Twitter Bootstrap and using the navbarI wanted to fill the whole container below the navigation bar with a Google Maps map. To accomplish that I have added the CSS following below.
在使用 Twitter Bootstrap 样式并使用导航栏的页面上，我想用 Google Maps 地图填充导航栏下方的整个容器。为了实现这一点，我在下面添加了 CSS。
I define for the htmland bodyelements the sizes to 100% so that this is used for the map's size definition. This solution, however, yields one problem:
我将html和body元素的大小定义为100%，以便将其用于地图的大小定义。但是，此解决方案会产生一个问题：
The map's height is now the same as the whole page height, which results in a scroll bar which I can scroll for the 40px the navigation bar adds. How can I set the size of the map to 100% - 40pxof the navigation bar?
地图的高度现在与整个页面的高度相同，这导致我可以滚动导航栏添加的 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;
}
For completeness the HTML:
为了完整性，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>
回答by Sherbrow
You could solve the problem with absolute positioning.
你可以用绝对定位来解决这个问题。
.fill {
top: 40px;
left: 0;
right: 0;
bottom: 0;
position: absolute;
width: auto;
height: auto;
}
You could also make the navbar .navbar-fixed-topand somehow add a padding or margin inside the #mapelement.
您还可以制作导航栏.navbar-fixed-top并以某种方式在#map元素内添加填充或边距。
