Question

我目前正在使用Bootstrap，使用他们提供的以下模板：

我喜欢标题/导航栏和侧边栏。我删除了“主要空间”div中的所有内容，将其留空。这是div的代码（忽略边框;我可以看到div正在做什么）：

<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main"
     id="maps_canvas" style="border:2px solid red">
    <!-- a Google Maps embed would be here -->
</div>

我的目标是将Google地图嵌入此空白区域。为此，我需要创建一个填充整个空白的div。理想情况下，我希望div绑定到窗口的边缘，因此它不会溢出/创建任何滚动。我发现通过硬设置我的高度，如果我调整了Chrome窗口的大小，就会导致溢出。有没有办法做到这一点？

例如，请查看http://www.renthop.com/。他们有一张地图可以完成我想做的事情 - 它会锁定在屏幕的右下方。

编辑：这是一个jquery问题。现在的问题是，我似乎无法同时运行这两个函数。当我删除我的$（文档）功能时，谷歌功能没有问题。当我加入它时，整个事情就会崩溃：

        /*$(document).ready(function() {
                /*  confirm("im here");
                /*$('#map_canvas').css({'height': (($(window).height()) - 114)+'px'});

                $(window).resize(function(){
                $('#map_canvas').css({'height': (($(window).height()) - 114)+'px'});
                });
        });*/




 function initialize(){         

                var map_canvas = document.getElementById('map_canvas');

                var map_options = {
                center: new google.maps.LatLng(40.749623,-73.9618013),
                zoom:12,
                mapTypeId: google.maps.MapTypeId.ROADMAP
                }

                var map = new google.maps.Map(map_canvas, map_options)
}
google.maps.event.addDomListener(window, 'load', initialize);

Answer 1

我对你的HTML和CSS做了一些改变，一个问题是因为bootstrap浮动他们不喜欢填充高度100％的项目。您需要将float容器定位为absolute，将其父容器设置为relative以保持它。 http://jsfiddle.net/RZb2D/3/

#maps_canvas {
 padding:0px;
 height:100%;
 position:absolute;
}
.row {
 height:100%;
 position:relative;
}

如何使<div>填充除导航栏之外的整个屏幕</div>

1 个答案: