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

Question

I'm currently using Bootstrap, using the following template they provide:

Bootstrap Dashboard Template

I like the header/navbar, and the sidebar. I have removed all the content in the "main space" div , leaving it blank. This is the div 's code (ignore the border; it's there for me to visualize what the div is doing):

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

My goal is to embed Google Maps in this whitespace. To do this, I need to create a div that fills the entire whitespace. Ideally, I would like the div to bind to the edges of the window, so it doesn't overflow / create any scrolling. I found that by hard-setting my height, it would result in overflow if I resized my Chrome window for example. Is there a way to do this?

For example, look at http://www.renthop.com/ . They have a map that does what I'm looking to do - it locks to the bottom right of the screen.

---

EDIT: This is a jquery problem. Problem now is, I can't seem to get both these functions to run. when I remove my $(document) function, the google function works no problem. When I include it, the entire thing falls over:

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

I mad some changes to your HTML and CSS, one problem is because bootstrap floats items they do not like to fill a height 100%. You need to make the float container positioned absolute and its parent as relative to maintain it. http://jsfiddle.net/RZb2D/3/

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