0

这是我的网站。（我整个早上都在努力，但目前我的主机似乎有一些问题，所以如果你无法连接它应该稍后再工作）。

如您所见，地图太大了。我有一个浮动在页面右侧的侧边栏，宽度为 150 像素，但这被掩盖了。我还有一个页脚，我将其设计为“推”到页面底部。如果没有地图 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;
}

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

#container_googlemap_Map {
  width: 70%;
}

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