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

Question

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

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

我找到了这个很好地填充页面的解决方案，但我无法在 map 上方找到标题。 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>

这是 fiddle > https://jsfiddle.net/johnny5a/vnr03ufs/6/

Answer 1

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

当您将 position fixed 放在 map 上时，它会从文档流中移除，并且不会附加到浏览器本身以外的任何内容。您需要稍微修改一下 CSS

body {
    position: relative;
    overflow: hidden;
}

您的 container-fluid 也需要这个 CSS

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

这应该可以解决问题。

你可以阅读定位here和 here