0

ここ は私の サイトです . （私は午前中ずっとそれに取り組んできましたが、現時点では私のホストに問題があるようですので、接続できない場合は後で動作するはずです）。

ご覧のとおり、マップが広すぎます。ページの右側に幅 150px のサイドバーが表示されていますが、これは隠されています。また、ページの下部に「プッシュ」されるように設計したフッターもあります。マップ div がなければ、これは正常に機能し、すべてが本来あるべき状態ですが、残りのスペースにマップ div を作成すると、スペースを適切に埋めることができません。幅 + 高さを 100% に設定すると、サイドバーが覆われ、マップがフッターの高さ分だけフッターの下に拡張されます。これが現在の設定です。幅と高さを「自動」に設定しようとしましたが、これで問題が解決しません。div の比率を、コードで設定した最小幅と高さ (100x100px) に制限するだけです。私はすでに「html」と「body」を設定しています

CSS

@charset "utf-8";
/* CSS Document */
#body {
 height: 100%;
 I have loads of other stuff here but my host isn't working properly at the moment so I can't get to it :S
}
#wrapper    {
 min-width: 100%;
 min-height: 100%;
 margin: 0  auto -150px;
 position: relative;
 overflow-x: hidden;
}

#main {
 height: 100%;
 width: 100%;
}

#content {
 width: 100%;
 height: 100%;
 padding: 0;
}

#googleMap {
 width: 100%;
 height: 100%;
 min-width: 100px;
 min-height: 100px;
 padding: 0;
 position:absolute;
 top: 86px;
 left: 0;
}

#sidebar    {
 width: 150px;
 height: 100%;
 min-height: 100%;
 float: right;
 text-align: center;
 background-image: url(../images/sidebar.png);
 background-repeat: no-repeat;
 background-color: #8fa642;
 margin: 0;
 padding: 0;
 overflow: hidden;
}

HTML - 読みやすくするためにヘッダーなどを省略していますが、これは私のサイトのソース ビューアーを使用して取得できます。

<div id="main">
 <div id="content">

  <div id="sidebar">
  Hello<br />
  This will be the sidebar!<br />
  It will be pretty plain til I work out the javascript...<br/>
  <img width="60px" height="60px" /><br/>
  <img width="60px" height="60px" />
  </div><!--sidebar-->

  <div id="googleMap" />
 </div><!--content-->

 <div class="push" />

 <div id="footer" class="footer clear">  
  <div class="image_carousel">
  <!-- Elastislide Carousel -->
   <ul id="carousel" class="elastislide-list">
   <li><a href="https://www.facebook.com/pages/Flagship-Global/135769953251026" target="_blank"><img src="images/slider/flagship.png" height="54px" alt="wwoof" /></a></li>
   <li><a href="http://eebu.earthshipeurope.org/" target="_blank"><img src="images/slider/eebu.png" height="54px" alt="eebu" /></a></li>
   <li><a href="#"><img src="images/small/3.jpg" height="54px" alt="image03" /></a></li>
   <li><a href="#"><img src="images/small/4.jpg" height="54px" alt="image04" /></a></li>
   <li><a href="#"><img src="images/small/5.jpg" height="54px" alt="image05" /></a></li>
   <li><a href="#"><img src="images/small/6.jpg" height="54px" alt="image06" /></a></li>
   <li><a href="#"><img src="images/small/7.jpg" height="54px" alt="image07" /></a></li>
   <li><a href="#"><img src="images/small/8.jpg" height="54px" alt="image08" /></a></li>
   <li><a href="#"><img src="images/small/9.jpg" height="54px" alt="image09" /></a></li>
   <li><a href="#"><img src="images/small/10.jpg" height="54px" alt="image10" /></a></li>
   <li><a href="#"><img src="images/small/11.jpg" height="54px" alt="image11" /></a></li>
   <li><a href="#"><img src="images/small/12.jpg" height="54px" alt="image12" /></a></li>
   <li><a href="#"><img src="images/small/13.jpg" height="54px" alt="image13" /></a></li>
   <li><a href="#"><img src="images/small/14.jpg" height="54px" alt="image14" /></a></li>
   <li><a href="#"><img src="images/small/15.jpg" height="54px" alt="image15" /></a></li>
   <li><a href="#"><img src="images/small/16.jpg" height="54px" alt="image16" /></a></li>
   <li><a href="#"><img src="images/small/17.jpg" height="54px" alt="image17" /></a></li>
   <li><a href="#"><img src="images/small/18.jpg" height="54px" alt="image18" /></a></li>
   <li><a href="#"><img src="images/small/19.jpg" height="54px" alt="image19" /></a></li>
   <li><a href="#"><img src="images/small/20.jpg" height="54px" alt="image20" /></a></li></ul>
   <!-- End Elastislide Carousel-->
   <div class="clear" />
  </div><!--image_carousel-->
  <div id="page_info">
  &#169; Permanet 2013
  </div><!--page info-->
 </div><!--footer-->
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
 <script src="js/jquerypp.custom.js" type="text/javascript"></script>
 <script src="js/jquery.elastislide.js" type="text/javascript"></script>
 <script type="text/javascript">        
 $( '#carousel' ).elastislide();
 </script>
</div><!--main-->
4

1 に答える 1

1

次のように iframe の幅を調整できます。

#googleMap {
  width: 73% !important;
}

しかし、本当に必要なことは、Google マップとウィジェット エリアの周りに 2 つの新しい div を作成することです。次に、それぞれに必要な幅を定義します。例:

#container_googlemap_Map {
  width: 70%;
}

#widget_area {
  width: 30%;
}
于 2013-04-23T09:20:38.790 に答える