可變高度的div容器iframe和div框不能正確擴展

我正在爲網站製作基本模板。它具有1個標題的div容器，主題菜單水平地列在標題下方，主要內容是谷歌地圖iframe（可變寬度）和側邊欄（絕對寬度，右側浮動）以及頁腳。可變高度的div容器iframe和div框不能正確擴展

我對主要內容的高度有一些麻煩。我希望iframe和側邊欄具有相同的高度，同時適合頁面併爲頁腳留下邊距，但主要內容始終將其自身設置爲最小高度，而不是拉伸到頁面。

HTML

<body> 
    <div id="wrapper"> 
     <div id="header"><img src="images/logo.png" width="360" height="127" /> </div><!--header--> 

     <div id="menu"> 
     <ul><li><a href="index.html">Home</a></li> 
     <li><a href="about.html">About</a></li> 
     <li><a href="network.html">Network</a></li> 
     <li><a href="help.html">Help</a></li> 
     <li><a href="contact.html">Contact</a></li></ul> 
     </div><!--mrnu--> 

     <div id="content"> 
     <div id="sidebar"> 
     Sidebar 
     </div><!--sidebar--> 

     <div id="main"> 
     <iframe id="map" width="100%" height="auto" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.co.uk/maps?q=52.988337,3.120117&amp;num=1&amp;ie=UTF8&amp;t=m&amp;z=6&amp;ll=51.206883,7.756348&amp;output=embed"></iframe> 
     </div><!--main--> 

     <div class="clear"></div> 
     </div><!--content--> 

     <div class="push"></div><!--push--> 

     <div id="footer" class="footer"> 
     </div><!--footer--> 
    </div><!--wrapper--> 
</body> 
</html>

CSS

body { 
    font-family: 'Trebuchet MS', Verdana, Helvetica, Arial, sans-serif; 
    font-size: 75.00%; 
    color: #fff; 
    background: url(images/bg.png); 
} 
a{ 
    color: #090; 
    text-decoration:none; 
} 
a:focus, a:hover, a:active { 
    color: #FFF; 
    text-decoration: underline; 
} 
.clearfix:after { 
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden 
} 
* { 
    margin: 0; 
} 
html, body { 
    height: 100%; 
} 
/* div tags */ 

#wrapper { 
    width: auto; 
    min-height: 100%; 
    height: auto !important; 
    height: 100%; 
    margin: 0 auto -100px; 
} 
#header { 
    position: relative; 
    width: auto; 
    height: auto; 
    background-color: #090; 
} 

#menu { 
    width: auto; 
    height: auto; 
    border: 2px solid #000; 
    font-size: 18px; 
} 

#menu ul { 
    padding: 0px; 
    margin: 0px; 
    text-align: center; 
} 

#menu li { 
    display: inline; 
    padding: 50px; 
} 

#content { 
    width: auto; 
    height: 100%; 
} 

#main { 
    width: auto; 
    margin-right: 125px; 
} 
#map { 
    width: 100%; 
    height: auto; 
} 

#sidebar { 
    width: 125px; 
    height: auto; 
    float: right; 
    text-align: center; 
    background-color: #FC0; 
} 

#footer { 
    width: auto; 
    height: 125px; 
    background-color:#CC0; 

} 
/* classes */ 

.clear { 
    clear: both; 
} 

.footer .push { 
    height:125px; 
}

注：有可能是代碼1條或2未使用的線路，當我一直在玩我還沒有發現如果有什麼不合適的地方，那麼它可能是。

我已經看到了這個問題的解決方案，使用固定寬度的容器，但我認爲問題在於我使用浮點函數。我已經讀過，定位需要是絕對的，才能正常工作，但是使用float是我能夠找到的唯一方法，它允許地圖使用可變寬度填充空間。

它可能很簡單，因爲與我正在測試的瀏覽器不兼容，但我不確定。

在此先感謝和抱歉，如果這篇文章有點混亂。我敢肯定，我會學着保持清潔很快; d

來源

2013-04-16 Joshua Flood

這是我的問題的屏幕截圖。 http://i1326.photobucket.com/albums/u652/DjDaihatsu/screenshot_zpsacdba33f.png 我不希望所有空間都在底部。 –

我也檢查了鉻和ie和兩個返回相同的問題。 –

嘗試這些風格changes-：

#map { 
    width: 100%; 
// height: auto; 
} 

#content { 
    width: auto; 
    //height: 100%; 
    height: auto; 
}

設置＃內容爲height：auto推#footer的div來滿足＃內容股利。

和設置高度爲100％（或顯示頁腳的80％）。它仍然留下地圖div的問題，現在將頁腳推到屏幕高度以下。爲了解決這個問題，可以爲iframe設置一個絕對高度，或者使用iframe的替代。

來源

2013-04-16 09:41:36 suspectus

謝謝suspectus。這似乎已經做到了，但是現在我看不到頁腳。你有什麼建議作爲替代？正如Google提出的那樣，我只是在看Ajax，但我並不確定如何實現它。 –

看看谷歌地圖javascript API https://developers.google.com/maps/documentation/javascript/tutorial。 Javascript的使用是必需的。根據網站需要做什麼，AJAX可能是必需的。我不認爲使用谷歌地圖JavaScript API需要AJAX。 – suspectus

謝謝。我一直在苦苦掙扎，我決定使用一個API，但是在ActionScript中使用過濾器爲它創建皮膚，因爲我找不到適合我需求的地圖插件。我也理想地使用winkel tripel投影作爲谷歌使用的投影實際上並不是現實世界的規模，但我還沒有找到一個支持這一點的API。 –

可變高度的div容器iframe和div框不能正確擴展

回答

相關問題