CSSの位置 - Googleマップのカットオフ

フルページGoogleマップの上部にヘッダーバーを配置しようとしていますが、なんらかの理由でブラウザのビューの下に地図が押し込まれて途切れてしまいます。私は地図上記上部ヘッダ（#top）を配置する場合CSSの位置 - Googleマップのカットオフ

、次いで#top端部は、それがブラウザの底下地図を押すとスクロールを作成top:35px、で開始する.mapContを位置付けます。固定位置レイアウトに関係なく、なぜ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