如何使<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>

我的目标是将谷歌地图嵌入到这个空白区域中。为此，我需要创建一个填满整个空白区域的

。理想情况下，我希望

绑定到窗口的边缘，以便它不会溢出/创建任何滚动条。我发现，通过硬编码高度，如果我调整Chrome窗口大小，就会导致溢出。有没有办法解决这个问题？

例如，请看http://www.renthop.com/。他们有一张地图，可以锁定在屏幕的右下角，这正是我想要实现的目标。

---

编辑：这是一个jQuery问题。现在的问题是，我似乎无法让这两个函数同时运行。当我删除$(document)函数时，谷歌函数就可以正常工作。但是当我包含它时，整个程序就会崩溃。

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

- keynesiancross

---

你需要给body和div设置高度为100％，然后使用col-lg-12，这将使Bootstrap无论大小都能够扩展到边缘。当然，你放在div里面的东西也必须适应。我认为Bootstrap会在col-lg-12中添加一些边距，因此你可能需要将其删除。 - TheHamstring

我已将 body、container、row 和 div 的高度都设置为 100%，但没有用。现在它只有大约一英寸高。 - keynesiancross

这里有一个 JSFiddle，包含了你所描述的起点，这样每个人都可以轻松地尝试编辑它。 - Rory O'Kane

似乎不起作用@RoryO'Kane。它仍然只给我一个横跨屏幕的1英寸行... - keynesiancross

@keynesiancross 请确保您在html标签上也添加了 height:100%; ... - Omega

Answer 1

我对你的HTML和CSS进行了一些更改，其中一个问题是因为Bootstrap浮动项目不喜欢填充100％的高度。你需要将浮动容器定位为绝对位置，并使其父级相对定位以保持它。http://jsfiddle.net/RZb2D/3/

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

- TheHamstring

---

你可能需要进行一些微调，以使其完全按照你的要求执行，但这将帮助你入门。 - TheHamstring

谢谢@TheHamstring。不幸的是，我似乎仍然无法让它工作。我已经按照您上面所说的做了，但现在我的谷歌地图基本上已经坍塌成了一个跨越屏幕宽度的1像素行... - keynesiancross

你能把你现有的内容放到 JSFiddle 里吗？如果你所拥有的是折叠行，可能会有一些东西丢失。 - TheHamstring

很遗憾我不能帮你解决问题，但我认为我已经有所进展了。这是一个jQuery的问题。问题在于，当我将此代码（请参见上文）写入我的.js文件时，两个函数都无法正常工作。当我删除$(document)部分时，Google的代码可以正常工作。 - keynesiancross

好的 - 我有点明白了。为什么地球上我需要在 .html 文档的末尾而不是头部放置<script type="text/javascript" src="mapsJS.js"></script>？这是因为代码试图调用尚未创建的 div 吗？ - keynesiancross

是的，如果您尝试使用浏览器尚未处理的元素，则您的JavaScript无法找到它。这也是jQuery建议将代码放在文档准备就绪函数中的原因。 - TheHamstring