让谷歌地图填充包含内容的主容器

Question

我有一个关于Bootstrap 3的解决方案。我有一个页眉和页脚，中间有一个全宽容器。在这个全宽容器中，我需要嵌入浏览器的全高谷歌地图，但地图上方是一些内容，例如标题或切换开关。

[编辑] 页眉和页脚是固定高度的，固定在浏览器的顶部和底部。我希望填充浏览器的中间部分。

我找到了这个解决方案，它可以很好地填充页面，但我无法在地图上方获得标题。 https://stackoverflow.com/a/27301088/285457

提前谢谢。

$(function() {
var mapDiv = document.getElementById("map_canvas");
/// Set control options for map
var zoptions = {
position: google.maps.ControlPosition.TOP_RIGHT,
style: google.maps.ZoomControlStyle.SMALL
};
/// Position of map using coord that were passed else do nothing.
var pos = new google.maps.LatLng(40.716948, -74.003563);
/// Set basic map options using above control options
var options = {
zoom: 10,
zoomControlOptions: zoptions,
mapTypeId: google.maps.MapTypeId.TERRAIN,
center: pos
};
this.map = new google.maps.Map(mapDiv, options);
})

html,body,.container-fluid,#map_canvas {
height: 100%;
}
.container-fluid {
width: 100%;
position: absolute;
top: 0;
padding: 0;
}
#map_header {
height:50px;
}
#map_canvas {
border-top: 50px solid #fff;
border-bottom: 20px solid #fff;
bottom:50px;
}
header {
height: 50px;
}
footer {
height: 20px;
}
#map-container {
position: fixed;
top: 50px;
left: 0;
bottom: 50px;
right: 0;
}

<header class="hidden-print">
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">menus etcs</div>
</div>
</header>
<div class="container-fluid" id="map-container">
<div id="map_header">This is part of the map content</div>
<div id="map_canvas" class="map_canvas"></div>
</div>
<footer class="navbar-default navbar-fixed-bottom">
<div class="row">footer stuff</div>
</footer>

这是小提琴> https://jsfiddle.net/johnny5a/vnr03ufs/6/

Answer 1

根据我从这里的评论中获得的信息是一个解决方案

当您在地图上放置固定位置时，它将从文档流中删除，并且除了浏览器本身之外，它不会附加到任何内容。你需要稍微修改一下你的CSS

。

body {
position: relative;
overflow: hidden;
}

您的container-fluid也需要此 CSS

.container-fluid{
position: absolute;
top: 0;
padding: 0;
width: 100%;
height: 100%;
}

这应该可以解决问题。

您可以在此处和此处阅读有关定位的信息