twitter-bootstrap 如何让谷歌地图用 Bootstrap 填充 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27295617/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get Google Map to fill div with Bootstrap
提问by John Hughes
I am looking for a better solution.
我正在寻找更好的解决方案。
I am trying to fill the middle of the browser screen with a Google Map. (between menu and footer) On IE the below code works fine. Sometimes it works for Chrome but almost always only shows the map in 25% of the map_canvas on Firefox.
我正在尝试用 Google 地图填充浏览器屏幕的中间。（在菜单和页脚之间）在 IE 上，下面的代码工作正常。有时它适用于 Chrome，但几乎总是只在 Firefox 上 25% 的 map_canvas 中显示地图。
Now after the page renders the entire map_canvas div is grey and fills the area so the 100% works in all browsers. If I resize the browser the map fills the whole area so on resize event it works in all browsers. The problem is in Chrome and Firefox the map only takes up about 25% of the grey area of the map_canvas div.
现在页面渲染后整个 map_canvas div 是灰色的并填充该区域，因此 100% 在所有浏览器中都有效。如果我调整浏览器的大小，地图会填满整个区域，因此在调整大小事件时它适用于所有浏览器。问题是在 Chrome 和 Firefox 中，地图仅占 map_canvas div 灰色区域的 25% 左右。
So the only thing I can think of is in IE the CSS for the div happens before the map is rendered and in Chrome and Firefox it happens after the map is rendered. I don't know if this is because I am using bootstrap or a problem with something else.
所以我唯一能想到的是在 IE 中，div 的 CSS 发生在地图渲染之前，而在 Chrome 和 Firefox 中，它发生在地图渲染之后。我不知道这是因为我使用的是引导程序还是其他问题。
I have a temp work around using this code. By setting the map_canvas height to the document height minus the menu/footer the map always displays in all browsers. The problem with this is if the user resizes the screen the map does not resize which is awkward and looks bad. I guess in desperation I could overload the windows resize event and just keep changing the map_canvas size but that sounds like a ugly hack too. Looking for something less ugly.
我有一个临时工作可以使用此代码。通过将 map_canvas 高度设置为文档高度减去菜单/页脚，地图始终显示在所有浏览器中。这样做的问题是如果用户调整屏幕大小，地图不会调整大小，这很尴尬而且看起来很糟糕。我想在绝望中我可以重载 windows resize 事件并不断更改 map_canvas 大小，但这听起来也很丑陋。寻找不那么丑的东西。
$("#map_canvas").css("min-height", $(document).height() - 70);
Browser sudo code
浏览器sudo代码
<!DOCTYPE html>
<html lang="en">
<head>
<!-- header stuff -->
<style>
<!-- in CSS file -->
#map_canvas
{
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<header class="hidden-print">
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
menus
</div>
</div>
</header>
<div class="container-fluid">
<div id="map_canvas" class="map_canvas">
</div>
</div>
<footer class="navbar-default navbar-fixed-bottom">
<div class="row">
stuff
</div>
</footer>
<script type="text/javascript">
$(function () {
var mapDiv: HTMLElement = 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: google.maps.MapOptions = {
zoom: 10,
zoomControlOptions: zoptions,
mapTypeId: google.maps.MapTypeId.TERRAIN,
center: pos
};
this.map = new google.maps.Map(mapDiv, options);
})
</script>
</body>
回答by Dr.Molle
When you know the height of header and footer it's not complicated.
当您知道页眉和页脚的高度时，它并不复杂。
Set the height of html,body, .container-fluidand #map_canvasto 100%;
设置的高度html，body，.container-fluid和#map_canvas100％;
For .container-fluidadditionaly set :
对于.container-fluid额外设置：
width:100%;
position:absolute;
top:0;
Now #map_canvaswill have the same size as the browsers viewport.
...But the map is partially covered by header & footer.
现在#map_canvas将具有与浏览器视口相同的大小。...但地图部分被页眉和页脚覆盖。
To fix it set the border-width of #map_canvasto:
要修复它，请将边框宽度设置#map_canvas为：
top:height of the header
bottom:height of the footer
#map_canvasnow still will be covered by header & footer, but it doesn't matter, the covered parts are the border
#map_canvas现在仍然会被页眉和页脚覆盖，但没关系，被覆盖的部分是边框
complete CSS:
完整的 CSS：
html, body, .container-fluid, #map_canvas {
height:100%;
}
.container-fluid {
width:100%;
position:absolute;
top:0;
padding:0;
}
#map_canvas {
border-top:50px solid #fff;
border-bottom:20px solid #fff;
}
header {
height:50px;
}
footer {
height:20px;
}
