谷歌地圖填充頁面保留在標題下

我試圖讓標題div出現在谷歌地圖上方，但讓地圖填充了頁面內容的所有其餘部分。谷歌地圖填充頁面保留在標題下

我遇到的麻煩是頁面不停地滾動，我不希望它。它滾動與標題高度相同的數量。我試圖把溢出：隱藏，但不起作用，因爲雖然它不再滾動它也不顯示谷歌徽標和合法的東西是必需的。

這是我的html：

<body> 
    <header>Title</header> 
    <div id="appcontent"> 
     <div id="map-canvas"></div> 
    </div> 
</body>

和CSS：

html, body { 
    margin: 0px; 
    width: 100%; 
    height: 100%; 
} 
#appcontent { 
    width: 100%; 
    height: 100%; 
} 
#map-canvas { 
    width: 100%; 
    height: 100%; 
} 
header { 
    width: 100%; 
    height: 40px; 
    background-color: #CFCFCF; 
}

我做了什麼，我試圖做這裏小提琴： http://jsfiddle.net/5LVQX/1/

能

人幫我解決這個問題？

來源

2014-01-09 TFRD

通過使用絕對定位，像這樣（fiddle）

#map-canvas { 
    position: absolute; 
    top: 40px; 
    left: 0px; 
    right: 0px; 
    bottom: 0px; 
} 
header { 
    position: absolute;  
    top: 0px; 
    left: 0px; 
    right: 0px;  
    height: 40px; 
    background-color: #CFCFCF; 
}

參見position: absolute。

來源

2014-01-09 14:13:14 canon

謝謝你，這是完美的。 – TFRD

-1

一個快速的解決方案是，添加此行JS：

$("#appcontent").height($(document.body).height() - $("header").height());

的jsfiddle：http://jsfiddle.net/5LVQX/3/

來源

2014-01-09 14:15:40

這個問題未標記爲[tag：javascript]或[tag：jquery]。 – canon

謝謝你告訴我，我從來不知道！但是，由於正在使用_jQuery_，因此在那裏添加更多行並沒有什麼壞處。 –

除了不必要的腳本來處理顯示問題。另外，在這個實現中，地圖不會與窗口一起調整大小。要解決這個問題，你需要添加_more_腳本來處理'window.onresize'。 – canon

溢出：隱藏

上

體

也應該工作。

編輯：

是否需要

CSS

#appcontent { 
    width: 100%; 
    height: calc(100% - 40px); 
    height: -webkit-calc(100% - 40px); 
}

來源

2014-01-09 14:17:13 Goombah

這會隱藏一些地圖的地圖區域。 –

我太快提供這個，你是對的。編輯。 – Goombah

_calc_有趣。只需要注意瀏覽器的支持，否則可愛！ –

谷歌地圖填充頁面保留在標題下

回答

相關問題