1

Twitter ブートストラップを使用しており、レール アプリのページの下部にステッカー フッター バーも実装しました。中央に 2 列のページがあり、基本的には右側のサイド バーがあるメイン ページです。

メイン ページ内に、Google マップで埋めたいキャンバス div があります。これはマッピングアプリなので、ナーバーとフッターの間のスペースの全長を伸ばすようにしたいと思います。幅 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% まで。

それでも問題が解決しない場合は、Mike Williams の v2 チュートリアルのこのページでパーセンテージ サイズのマップ div に関連する問題について説明します:パート 20 マップ div にパーセンテージの高さを使用する 、ほとんどすべての問題は v3 でも同じです。

于 2012-07-06T00:39:22.413 に答える