API карт Google v3 div не будет заполнять пространство правильно 100% ширина + высота

Question

Вот мой сайт. (Я работал над этим все утро, но в данный момент, похоже, есть проблема с моим хостом, поэтому, если вы не можете подключиться, он должен работать позже).

Как видите, карта слишком большая. У меня есть боковая панель, плавающая справа от страницы шириной 150 пикселей, но она закрыта. У меня также есть нижний колонтитул, который я спроектировал так, чтобы он был "сдвинут" вниз страницы. Без карты div это работает нормально, и все так, как должно быть, но когда я создаю карту 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-ов вокруг вашей карты Google и вокруг области виджетов. Затем вы определите ширину, которую вы хотите для каждого из них, например:

#container_googlemap_Map {
  width: 70%;
}

#widget_area {
  width: 30%;
}