ruby-on-rails-3 - 将 div(谷歌地图)设置为 100% 高度，以便填充 Twitter Bootstrap 中导航栏和页脚之间的空白

Question

我正在使用 Twitter Bootstrap ，并且还在 Rails 应用程序的页面底部实现了一个贴纸页脚栏。我在中间有一个两栏页面，基本上是一个带有右侧栏的主页。

在主页中，我有一个 Canvas div，我想用谷歌地图填充。这是一个 map 应用程序，所以我想让它拉伸(stretch) nar 栏和页脚之间的整个空间长度。宽度 100% 似乎可以很好地填充列，但高度不起作用。

有人有什么建议吗？我在下面包含了当前代码:

当前的 bootstrap_and_override.css

 @import "twitter/bootstrap/bootstrap";

 html, body {
    height: 100%;
 }

 body { 
    padding-top: 0;
 }

 .navbar {
    margin-bottom: 5px;
 }

 footer {
     color: #CCC;
     background: #006890;
     padding: 5px 0 5px 5px;
     border-top: 1px solid #006890;
 }
 footer a {
     color: #999;
 }
 footer a:hover {
    color: #efefef;
 }
 .wrapper {
     min-height: 100%;
     height: auto !important;
     height: 100%;
     margin: 0 auto -30px;
 }
 .push {
     height: 30px;
 }

 .logo {
     padding-top: 7px
 }

 #map_canvas { 
     height: 800px;
     width: 100%;
     background-color: #cccccc;
      }

 @import "twitter/bootstrap/responsive";

 // Set the correct sprite paths
 @iconSpritePath: asset-path('twitter/bootstrap/glyphicons-halflings.png');
 @iconWhiteSpritePath: asset-path('twitter/bootstrap/glyphicons-halflings-white.png');

 // Set the Font Awesome (Font Awesome is default. You can disable by commenting below lines)
 // Note: If you use asset_path() here, your compiled boostrap_and_overrides.css will not 
 //       have the proper paths. So for now we use the absolute path.
 @fontAwesomeEotPath: '/assets/fontawesome-webfont.eot';
 @fontAwesomeWoffPath: '/assets/fontawesome-webfont.woff';
 @fontAwesomeTtfPath: '/assets/fontawesome-webfont.ttf';
 @fontAwesomeSvgPath: '/assets/fontawesome-webfont.svg';

 // Font Awesome
 @import "fontawesome";

 // Your custom LESS stylesheets goes here

 @navbarBackground: #ccc;
 @navbarBackgroundHighlight: #fff;
 @navbarBrandColor: #000;
 @navbarHeight: 68px;
 @gridGutterWidth: 0px;

当前页面内容:

 <div class="row-fluid">
   <div class="span9">

    <div id="map_canvas" style="width:100%; height: 800px;"></div>

   </div>
   <div class="span3">Right Column</div>
 </div>

 <% content_for :head do %>

 <script type="text/javascript"
   src="https://maps.googleapis.com/maps/api/js?sensor=false">
      </script>
     <script type="text/javascript">
       function initialize() {
         var myOptions = {
           center: new google.maps.LatLng(35.17380831799959, -94.39453125),
             zoom: 5,
           mapTypeId: google.maps.MapTypeId.ROADMAP
          };
     var map = new google.maps.Map(document.getElementById("map_canvas"),
         myOptions);
   }
 </script>

 <% end %>

Answer 1

如果你想让 map 是100%，你至少需要改变这个:

#map_canvas { 
     height: 800px;
     width: 100%;
     background-color: #cccccc;
}

还有这个:

<div id="map_canvas" style="width:100%; height: 800px;"></div>

到高度 100%。

如果这没有帮助，Mike Williams 的 v2 教程的这一页讨论了涉及百分比大小的 map div 的问题:Part 20 Using a percentage height for the map div ，几乎所有问题在 v3 中都是相同的。