谷歌地圖API v3 div不會正確填充空間100％寬度+高度

Question

這裏是my site。 （我整個上午一直在研究它，但目前似乎與我的主機有一些問題，所以如果無法連接它，應該稍後再運行）。

正如你所看到的地圖太大了。我有一個側邊欄浮動在頁面的右側，寬度爲150px，但是這被掩蓋了。我也有一個腳本，我已經設計爲'推到'頁面的底部。沒有地圖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; 
} 

但是你真正需要做的是建立在你的谷歌地圖和周圍的按鈕區兩個新的申報單。然後，你將定義你想爲他們每個人的寬度， 例如：

#container_googlemap_Map { 
    width: 70%; 
} 

#widget_area { 
    width: 30%; 
}