怎么做 <div> 填充整个屏幕除了导航栏

Question

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

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;
}