How to make <div> fill whole screen except for navbars - html

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