Question

这是我可以在html文件中复制的代码，用于显示结果：

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<style>
html, body
{
    margin:0;
    padding:0;
    height:100%;
    width:100%;
}
</style>

<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false"></script>

<script>
function initialize()
{
    var mapProp = {center:new google.maps.LatLng(51.508742,-0.120850), zoom:5, mapTypeId:google.maps.MapTypeId.ROADMAP};
    var map=new google.maps.Map(document.getElementById("google_map"), mapProp);
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>



</head>

<body>

<table style="width:100%;height:100%;padding:0px;border-spacing:0px;">
    <tr>
      <td style="padding:0px; height:31px; background-color:#D8AC11;">Menu</td>
    </tr>
    <tr>
      <td style="padding:0px;width:100%;height:100%;"><div id="google_map" style="width:100%; height:100%;"></div></td>
    </tr>
</table>

</body>
</html>

Chrome或Mozilla没有问题，您可以在整个屏幕高度看到菜单和地图，但在IE高度不能100％，页面会变为滚动。我该如何解决这个问题？

Answer 1

绝对位置而不是使用表格怎么样？这是一个在IE8及以上版本中运行良好的解决方案：

 <div style="padding:0px; height:31px; background-color:#D8AC11;position:relative;">Menu</div><div id="google_map" style="width:100%;position:absolute;top:31px;bottom:0;"></div>

IE无法在100％高度显示表格

1 个答案: