Question

这是my site。（我整个上午一直在努力，但目前我的主机似乎存在一些问题，所以如果你不能连接它应该稍后工作）。

正如您所看到的，地图太大了。我有一个侧边栏浮动在页面右侧，宽度为150px，但这已被掩盖。我还有一个页脚，我设计为“推”到页面底部。没有map div这个工作正常，一切都是应该的，但是当我在剩下的空间中创建map div时，我无法让它正确填充空间。如果我将宽度+高度设置为100％，则侧边栏会被遮盖，并且地图会在页脚下方延伸大约页脚的高度，这就是现在设置的方式。我已经尝试将宽度和高度设置为“自动”，但这并不能解决我的问题。它只是将div的比例限制为我在代码中设置的最小宽度和高度（100x100px）。我已经将'html'和'body'设置为100％，据我所知，我需要为'width + height = auto'做正确的工作。

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-->

Answer 1

您可以像这样调整iframe的宽度：

#googleMap {
  width: 73% !important;
}

但你真正需要做的是在你的谷歌地图周围和你的小部件区域周围创建两个新的div。然后，您将为每个宽度定义所需的宽度，例如：

#container_googlemap_Map {
  width: 70%;
}

#widget_area {
  width: 30%;
}

谷歌地图API v3 div将无法正确填充空间100％宽度+高度

1 个答案: