ruby-on-rails-3 - 使div(谷歌 map )高度为100％，以便填补Twitter bootstrap 中导航栏和页脚之间的间隙

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

在主页中，我有一个画布div，我想用Google地图填充。这是一个贴图应用程序，因此我想使其延伸到nar bar和footer之间的整个空间。宽度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 %>

最佳答案

如果您希望地图为100％，则至少需要更改此设置：

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

还有这个：

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

达到身高100％。

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

关于ruby-on-rails-3 - 使div(谷歌 map )高度为100％，以便填补Twitter bootstrap 中导航栏和页脚之间的间隙，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/11354052/