CSS position - 谷歌地圖截圖

試圖將標題欄放在整個頁面Google Map的頂部，但由於某種原因，它會將地圖推到瀏覽器視圖下方並切斷。CSS position - 谷歌地圖截圖

如果我把地圖上方的頂部集流管（#top），則定位在.mapConttop:35px，其中#top端部時，它推動瀏覽器的底部之下的地圖，並創建一個滾動啓動。不管固定位置佈局，爲什麼它不適合100％的高度？它似乎推動它低於瀏覽器窗口的範圍35px。

不能排除這一個。思考？

代碼：

<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 

<style type="text/css"> 
    html { height: 100% } 
    body { height: 100%; margin: 0; padding: 0 } 
    #map_canvas { width:100%; height:100%; background: #111 url(../images/loading.gif) no-repeat 50% 50%; z-index: 1; } 

.mapCont { 
    display: block; 
    height:100%; 
    width:100%; 
    position:fixed; 
    top:35px; 
    left:0; 
    background-color:#111; 
    z-index: 0; 
} 

#top{ 
    height:35px; 
    width:100%; 
    background: url('../images/finals/wood_top.png') repeat-x; 
    display: block; 
    position:fixed; 
    top:0; 
    left:0; 
    z-index: 100; 
} 

.headerLine { 
    height:14px; 
    width:100%; 
    background: url('../images/finals/headerLine.png') repeat-x; 
    display: block; 
    position:fixed; 
    top:31px; 
    left:0; 
    z-index: 99; 
} 

</style> 

<script type="text/javascript" 
    src="http://maps.googleapis.com/maps/api/js?sensor=false"> 
</script> 

<script type="text/javascript"> 
    function initialize() { 
    var latlng = new google.maps.LatLng(-34.397, 150.644); 
    var myOptions = { 
     zoom: 8, 
     center: latlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    var map = new google.maps.Map(document.getElementById("map_canvas"), 
     myOptions); 
    } 

</script> 
</head> 
<body onload="initialize()"> 

<div id="top"> 

     <div class="mapCont"> 
      <div id="map_canvas"></div> 
     </div> 

</div> 
<div class="headerLine"></div> 

</body> 
</html>

來源

2011-07-31 RonnieT

你計算100％的.mapCont

+ 35px你有沒有嘗試添加overflow:hidden;到body？

這個工作對我來說：http://jsfiddle.net/SV8VB/

來源

2011-07-31 22:16:05 Maverick

底部似乎仍然被切斷35px，谷歌版權和任何地圖控制設置在底部 - 在我的情況下，Adsense。 – RonnieT

你可以嘗試設置您的上邊距來-35px。

margin-top: -35px;

我有同樣的問題和60px的菜單欄。看起來好像我的底部損失了大約60px，所以當我嘗試使用負值保證金時，失蹤的底部內容終於出現了。你的是35像素，所以嘗試在菜單下推動地圖，看看它是否做到了。

來源

2016-04-04 10:14:44 paxveritas

CSS position - 谷歌地圖截圖

回答

相關問題