1

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

在主页中，我有一个画布 div，我想用谷歌地图填充。这是一个地图应用程序，所以我想让它拉伸 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 %>
4

1 回答 1

1

如果你希望地图是 100%，你至少需要改变这个： 

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

和这个：

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

到高度 100%。

如果这没有帮助，涉及百分比大小的地图 div 的问题将在 Mike Williams 的 v2 教程的此页面中讨论：第 20 部分 使用地图 div 的百分比高度，几乎所有问题在 v3 中都是相同的。

于 2012-07-06T00:39:22.413 回答