Google지도 API v3 div가 공간을 제대로 채우지 못함 100 % 너비 + 높이

Question

여기에 my site입니다. (나는 그것에 대해 아침 내내 일해 왔지만, 잠시 후 내 호스트와 문제가있는 것 같아서 나중에 연결할 수 없다면 나중에 연결해야한다.)

지도에서 알 수 있듯이 너무 큽니다. 나는 150px의 너비와 함께 페이지의 오른쪽에 뜨는 사이드 바를 가지고있다. 그러나 이것은 은폐되어있다. 페이지 바닥에 '푸시'되도록 고안된 꼬리말도 있습니다. 맵 div 않고이 잘 작동하고 모든 방법이 있어야합니다,하지만 내가 남은 공간에서 맵 div를 만들면 나는 공간을 제대로 채울 수 없습니다. 너비 + 높이를 100 %로 설정하면 사이드 바가 덮히고지도가 바닥 글 높이 정도까지 내 바닥 너비까지 확장됩니다. 이제 바닥 글 높이가 어떻게 설정되는지 알려줍니다. 나는 너비와 높이를 'auto'로 설정하려고했지만 내 문제는 해결되지 않습니다. 그것이하는 일은 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%; 
}