Question

当我将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>

Answer 1

原因是你没有为身体设置任何身高/宽度。

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

#container {
    height: 100%;
}

始终使用

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

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

1 个答案: