Question

在bootstrap 3中，我从顶部开始有以下元素：

导航栏标题
包含谷歌地图的div
包含一些小部件的行。

可以显示符合屏幕高度的谷歌地图，地图下方的行包含其他元素吗？

Answer 1

如果您有一个固定的页眉和页脚，并提前知道它们的高度，您可以使用固定元素包装地图并相应地设置top和bottom属性。

＆＃13;

function initialize() {
  var mapCanvas = document.getElementById('map-canvas');
  var mapOptions = {
    center: new google.maps.LatLng(44.5403, -78.5463),
    zoom: 8,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map = new google.maps.Map(mapCanvas, mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);

＆＃13;

#map-container {
  position: fixed;
  top: 50px;
  left: 0;
  bottom: 50px;
  right: 0;
}

#map-canvas {
  width: 100%;
  height: 100%;
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maps.googleapis.com/maps/api/js"></script>

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Header</a>
    </div>
  </div>  
</nav>

<div id="map-container">
  <div id="map-canvas"></div>
</div>

<footer class="navbar navbar-default navbar-fixed-bottom">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Footer</a>
    </div>
  </div>  
</footer>

＆＃13;

Bootstrap：显示适合导航标题

1 个答案: