谷歌地圖佔用了整個高度

Question

這是我工作的代碼，但我無法理解我出錯的地方。地圖應該顯示在頁眉和頁腳之間的完整高度，但它看起來實際上是在頁眉和頁腳之下延伸的。這是一個問題，因爲它涵蓋了Google版權信息和控件的一部分。

http://jsfiddle.net/GFcBU/9/

誰能告訴我哪裏出了問題？

html, body, #container { height: 100%; } 
body { z-index:1; position:relative; } 
body > #wrapper { height:100%; margin:0 auto; width:100%; } 
body > #wrapper > #header { z-index:3; position:relative; height:45px; background:#ccc; } 
body > #wrapper > #container { z-index:2; position:relative; height:auto; min-height:100%; background:#eee; margin-top:-45px; padding-top:45px; padding-bottom:25px; box-sizing:border-box; margin-bottom:-25px; } 
body > #wrapper > #footer { height:25px; background:#333; color:#fff; z-index:3; position:relative; } 

.left {float: left;} 
.right {float: right;} 

Answer 1

請嘗試以下方法：

body > #wrapper > #container { 
    z-index:2; 
    position:absolute; 
    top: 45px; 
    bottom: 0; 
    height:auto; 
    background:#eee; 
    box-sizing:border-box; 
    margin-bottom: 25px; 
    width: 100%; 
} 

body > #wrapper > #footer { 
    height:25px; 
    background:#333; 
    color:#fff; 
    z-index:3; 
    position:absolute; 
    bottom: 0; 
    width: 100% 
} 

這裏是jFiddle：http://jsfiddle.net/G3Pxy/

對於容器，我添加position: absolute，top: 45px和bottom: 0。當高度設置爲自動時，它應該佔據屏幕的剩餘高度。您已爲頁腳留下空間的margin-bottom: 25px。對於頁腳，我只添加了width: 100%。出於某種原因，頁腳的寬度沒有跨越屏幕的寬度，所以我不得不補充一點。