我尝试使用 Google map 作为我正在开发的网络应用程序的全屏背景。我使用了一个 div 来保存 map ，但到目前为止我似乎找不到一种有效地使其全屏显示的方法。
当使用绝对定位时，我可以让它填满浏览器窗口，但是如果页面上有滚动条，当我向下滚动时，背景不会填满浏览器窗口下方的剩余空间。
我也尝试过使用固定定位，但似乎也不起作用。它会将其余内容推到背景下，除非我将其全部包裹起来并将其绝对放置在顶部，但这仍然不能解决滚动问题。
这是我目前的想法:
<body>
<div id="background"></div>
<div id="wrapper" class="grid-container">
<!-- Content -->
</div>
<footer>
<!-- Footer -->
</footer>
</body>
还有 CSS:
#background {
position:absolute;
width:100%;
min-height:100%;
top:0px;
left:0px;
z-index:-1;
}
我将页脚放在包装器 div 之外的原因是因为我使用的是粘性页脚 (http://www.cssstickyfooter.com/)，并且我使用的是响应式网格系统，称为非语义 (http://unsemantic.com/)。
任何帮助将不胜感激! 谢谢， 亚伦
最佳答案
您必须将 map 包装在一个 div 中，并在调用 div 名称类或 ID 的 header 中调用脚本。在 css 中给 div 100% 的宽度和高度。如果你想要确切的窗口高度调用 jquery
$(document).ready(function(e) {
var hheight = $(window).height();
$('#map_canvas').css('height', hheight);
$(window).resize(function(){
var hheight = $(window).height();
$('#map_canvas').css('height', hheight);
});
});
<html>
<head>
<style>
#map_canvas {
width: 100%;
height: 400px;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
function initialize() {
var map_canvas = document.getElementById('map_canvas');
var map_options = {
center: new google.maps.LatLng(44.5403, -78.5463),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(map_canvas, map_options)
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map_canvas"></div>
</body>
</html>
关于html - 全屏谷歌地图背景 div 与 CSS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22275640/