Html 引导：在navbar下填充整个容器减去navbar高度_Html_Css_Twitter Bootstrap_Size

Html 引导：在navbar下填充整个容器减去navbar高度

html css twitter-bootstrap

Html 引导：在navbar下填充整个容器减去navbar高度,html,css,twitter-bootstrap,size,Html,Css,Twitter Bootstrap,Size,在一个用Twitter引导和导航栏设计的页面上，我想用谷歌地图填充导航栏下面的整个容器。为了实现这一点，我在下面添加了CSS 我将html和body元素的大小定义为100%，以便用于地图的大小定义。但是，此解决方案会产生一个问题：地图的高度现在与整个页面的高度相同，这导致了一个滚动条，我可以滚动到导航条添加的40px。如何将地图的大小设置为导航栏的100%-40px #map { height: 100%; width: 100%; } #map img {

在一个用Twitter引导和导航栏设计的页面上，我想用谷歌地图填充导航栏下面的整个容器。为了实现这一点，我在下面添加了CSS

我将

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>

您可以使用绝对定位来解决问题

.fill{
顶部：40px；
左：0；
右：0；
底部：0；
位置：绝对位置；
宽度：自动；
高度：自动；
}

您还可以将导航栏

.navbar固定在顶部，并在#map
元素中添加一个填充或边距。
我说得对吗，这样，应用程序就不再响应，因为引导程序将其菜单切换到绝对位置的map div上。@JürgenZornig响应性不是绝对状态。如果这适用于更小/更宽屏幕上的布局，那么它是响应性的。如果没有，请输入一些媒体查询并使其符合您的需要。是的，我同意您的意见，但如果我将Div绝对置于40px之上，则当我打开导航栏菜单时，较小屏幕上的标准引导菜单行为将与我的Div重叠。对不起，我只是想找出这个答案是否符合我的布局需要。刚刚用另一种方法解决了它（Position:static）@JürgenZornig你能分享一下你是如何用Position:static？我用Sherbrow的小提琴创建了一个包含地图的演示：