0

Google マップ (下) の 80% の画面と、上に div id (#data と呼ばれる) の 20% の画面を表示しようとしています。以下はうまくいかないようです。修正されたものは ** でマークされ、** で終わります

<!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 { height: 80% }
        #data { height: 20% }**
    </style>
    <script type="text/javascript"
  src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=SET_TO_TRUE_OR_FALSE">
</script>
<script type="text/javascript">
  function initialize() {
    var mapOptions = {
      center: new google.maps.LatLng(-34.397, 150.644),
      zoom: 8,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map-canvas"),
        mapOptions);
  }
  google.maps.event.addDomListener(window, 'load', initialize);
 </script>
 </head>
 <body>
    **<div id="data"/>**
    <div id="map-canvas"/>
 </body>
 </html>

何か案は？

4

1 に答える 1

0

体の高さを em 単位で指定してみてください (例: 100em)。または、2 つの div を親 div でラップし、em または px で高さを指定します。これにより、div に 80% と 20% の意味のコンテキストが与えられます。また、div の自己クローズを与えることでトラブルを求めています。これは正当なマークアップではありません。一部のブラウザでは動作する場合がありますが、すべてのブラウザで動作する可能性は低く、たとえ動作したとしても将来的に動作しなくなる可能性があります。壊れそうです。

于 2013-06-02T12:04:00.537 に答える