Html 带有CSS的全屏谷歌地图背景div_Html_Css_Css Position

Html 带有CSS的全屏谷歌地图背景div

html css

Html 带有CSS的全屏谷歌地图背景div,html,css,css-position,Html,Css,Css Position,我试图使用谷歌地图作为我正在开发的一个web应用程序的全屏背景。我使用了一个div来保存地图，到目前为止，我似乎还没有找到一种方法来有效地使其全屏显示使用绝对定位时，我可以让它填充浏览器窗口，但是如果页面上有滚动条，我向下滚动，背景不会填充浏览器窗口下方的剩余空间我也尝试过使用固定定位，但这似乎也不起作用。它会将其余内容推到背景下，除非我将其全部包装并将其绝对置于顶部，但这仍然无法解决滚动问题这是我目前的想法： <body> <div id="background

我试图使用谷歌地图作为我正在开发的一个web应用程序的全屏背景。我使用了一个div来保存地图，到目前为止，我似乎还没有找到一种方法来有效地使其全屏显示

使用绝对定位时，我可以让它填充浏览器窗口，但是如果页面上有滚动条，我向下滚动，背景不会填充浏览器窗口下方的剩余空间

我也尝试过使用固定定位，但这似乎也不起作用。它会将其余内容推到背景下，除非我将其全部包装并将其绝对置于顶部，但这仍然无法解决滚动问题

这是我目前的想法：

<body>
    <div id="background"></div>
    <div id="wrapper" class="grid-container">
        <!-- Content -->
    </div>
    <footer>
        <!-- Footer -->
    </footer>
</body>

我之所以将页脚放在包装器div之外，是因为我使用了一个粘性页脚（）和一个称为Unsemantic（）的响应网格系统

任何帮助都将不胜感激！谢谢

Aaron

您需要将地图包装在一个div中，并调用脚本标题调用div name class或ID。在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>

$（文档）.ready（函数（e）{
var hhheight=$（window.height（）；
$（'map_canvas'）.css（'height'，hhheight）；
$（窗口）。调整大小（函数（）{
var hhheight=$（window.height（）；
$（'map_canvas'）.css（'height'，hhheight）；
});
});
#地图画布{
宽度：100%；
高度：400px；
}
函数初始化（）{
var map_canvas=document.getElementById（'map_canvas'）；
变量映射_选项={
中心：新google.maps.LatLng（44.5403，-78.5463），
缩放：8，
mapTypeId:google.maps.mapTypeId.ROADMAP
}
var map=new google.maps.map（地图画布，地图选项）
}
google.maps.event.addDomListener（窗口“加载”，初始化）；

看看这是否有帮助：本页建议的方法在一定程度上有效。背景地图随页面滚动，这是一个很好的解决方案，但是如果可能的话，我正在寻找一种方法，使背景地图自动扩展到页面的大小（而不是视口），因为我认为这样会更好地满足我的要求。这似乎对我不起作用。它只是使地图显示在其余内容的上方，将页面内容放入div并使用绝对定位将其定位在地图上方也不起作用。

$(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>