Question

我正在尝试将谷歌地图的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>

有什么想法吗？

Answer 1

尝试给你的身体一个高度，例如100em;或者更好的是将你的2个div包装在父div中，然后在em或px中给出一个高度。这将为你的div提供80％和20％意味着什么的背景。此外，你通过让div自我关闭来解决问题。这不是合法的加价。您可能会发现它在某些浏览器中有效，但它不可能全部起作用，即使它确实有效，也可能在将来不会。它可能会破裂。

CSS上的面板分配

1 个答案: