Bootstrap：在navbar下减去导航栏高度填充整个容器 [英] Bootstrap: Fill whole container under navbar minus navbar height
问题描述
在设有Twitter Bootstrap并使用导航栏的页面上，我想使用Google地图地图填充导航栏下方的整个容器。
On a page styled with Twitter Bootstrap and using the navbar I 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.
我定义了 html 和 body 元素的大小设置为100％，以便用于地图的大小定义。然而，这个解决方案产生一个问题：
I define for the html and body elements the sizes to 100% so that this is used for the map's size definition. This solution, however, yields one problem:
地图的高度现在与整个页面高度相同，这导致一个滚动条，我可以滚动40px导航栏添加。如何将地图大小设置为导航栏的 100％ - 40px ？
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% - 40px of the navigation bar?
#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：
For completeness the 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>
推荐答案
您可以解决绝对定位的问题。 p>
You could solve the problem with absolute positioning.
.fill {
top: 40px;
left: 0;
right: 0;
bottom: 0;
position: absolute;
width: auto;
height: auto;
}
Demo (jsfiddle)
您也可以使navbar .navbar-fixed-top 并以某种方式在 #map 元素中添加填充或边距。
You could also make the navbar .navbar-fixed-top and somehow add a padding or margin inside the #map element.
这篇关于Bootstrap：在navbar下减去导航栏高度填充整个容器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
