如何使用谷歌地圖自動填充頁眉和頁腳之間的空間？

我想創建一個頁眉，頁腳，左列（包含一些按鈕等25％寬的列）和主要內容區域，必須填寫谷歌地圖的網頁。如何使用谷歌地圖自動填充頁眉和頁腳之間的空間？

我試圖從this answer修改內容的方式如下：

<body onload="initialize()"> 
<div id="wrapper"> 
    <div id="header">Header</div> 
    <div id="leftcolumn">Left Column</div> 
    <div id="map_canvas"></div> 
    <div id="push"></div> 
</div> 
<div id="footer">footer</div> 

html, body { 
margin: 0px; 
padding: 0px; 
height: 100%; 
width: 100%; 
} 
#wrapper { 
    min-height: 100%; 
    height: auto; 
    height: 100%; 
    margin: 0 auto -100px; 
    background-color: red; 
    border: 1px solid black; 
    } 

#header { 
background: #438a48; 
height:100px; 
} 
#leftcolumn { 
background: #2675a8; 
float: left; 
width: 25%; 
height:auto; 
height:100%; 

} 

#map_canvas { 
background: #000; 
float: right; 
width: 75%; 
height:100%; 
} 

#footer, #push { 
background: #df781c; 
height:100px; 
}

但參數高度：100％;在map_canvas和#leftcolumn導致內容超過屏幕大小，但如果沒有指定高度的地圖不能被看到。

有沒有人如何修改/創建佈局，以便自動填充內容區域與谷歌地圖？

謝謝！

來源

2010-02-07 Niko Gamulin

你的問題是你有一個100px的標題，你不能從你給map_canvas的100％高度中減去它。因此，構造的總高度當然是身高的100％，再加上它溢出到底部的100個像素。

我通常這樣解決它。我討厭使用position: absolute除非真的有必要，但我看不到更好的方法：

#map_canvas { 
background: #000; 
position: absolute; 
left: 25%; 
right: 0px; 
bottom: 0px; 
top: 0px; 
}

來源

2010-02-07 19:05:29

如何使用谷歌地圖自動填充頁眉和頁腳之間的空間？

回答

相關問題