0

我正在尝试将 80% 的谷歌地图屏幕（底部）和 20% 的 div id（称为#data）屏幕用于顶部。以下似乎不起作用。修改后标有**并以**结尾

<!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

试着给你的身体一个高度，例如 100em；或者最好还是将您的 2 个 div 包装在父 div 中，并以 em 或 px 为单位给出高度。这将为您的 div 提供 80% 和 20% 含义的上下文。另外，你给 div 一个 self 关闭是在自找麻烦。这不是合法的加价。您可能会发现它在某些浏览器中有效，但不太可能在所有浏览器中都有效，即使有效，将来也可能无效。它很可能会破裂。

于 2013-06-02T12:04:00.537 回答