当我将高度设置为100％时，Google地图不会显示

Question

当我将高度设置为100％时，Google地图不会显示

3

当我将gmaps div的高度设置为100％时，什么也没有显示。宽度我可以设置为100％，但是对于高度我无法这样做，如果我例如将高度设置为400px，则可以正常工作，但不能设置为100％。

这是我的代码：

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<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("googleMap"),
                mapProp);
    }

    google.maps.event.addDomListener(window, 'load', initialize);
</script>
<style type="text/css">
#body {
    height: 100%;
}

#container {
    height: 100%;
}

#googleMap {
    width: 70%;
    height: 100%;
    margin-top: 8px;
    float: left;
}

#myWorkContent {
    width: 30%;
    height: 400px;
    margin-top: 8px;
    overflow-x: hidden;
    overflow-y: scroll;
    /*white-space: nowrap;*/
    float: left;
}

#myWorkContent img {
    border: 0;
    width: 80px;
    margin-left: 5px;
}
</style>
</head>
<body>
    <div id="container" class="container">

        <h2>Photos of the day</h2>

        <a href="FriendsList.jsp">Photos of the day</a> | <a
            href="PlacesServlet.jsp">My day in map</a> <br />

        <div id="googleMap"></div>
        <div id="myWorkContent" class="myWorkContent">
            <!-- Your images over here -->
            <img src="images/IMG_20131216_084621.jpg" style="height: 80px;" /> <img
                src="images/IMG_20131216_085350.jpg" style="height: 80px;" /> <img
                src="images/IMG_20131216_085551.jpg" style="height: 80px;" /> <img
                src="images/IMG_20131216_092417.jpg" style="height: 80px;" /> <img
                src="images/IMG_20131216_092514.jpg" style="height: 80px;" /> <img
                src="images/IMG_20131216_092529.jpg" style="height: 80px;" /> <img
                src="images/IMG_20131220_111813.jpg" style="height: 80px;" /> <img
                src="images/IMG_20131220_112158.jpg" style="height: 80px;" />
        </div>
    </div>
</body>
</html>

- JoaoFilipeClementeMartins

我用这个链接解决了问题：https://dev59.com/aFDTa4cB1Zd3GeqPKI9R。请有权限的人将我的问题标记为重复。原因是缺少HTML高度设置。 - undefined

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Praveen · Accepted Answer

原因是您没有为body设置任何高度/宽度。

#body {  //wrong selector
    height: 100%;
}

#container {
    height: 100%;
}

始终使用

html, body {
  width: 100%;
  height: 100%;
}