css - 当我将高度设置为 100% 时,谷歌地图没有出现

标签 css google-maps jsp html

<分区>

当我将 gmaps div 的高度设置为 100% 时,什么也没有出现。我可以将宽度设置为 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>

最佳答案

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

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

#container {
    height: 100%;
}

始终使用

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

关于css - 当我将高度设置为 100% 时,谷歌地图没有出现,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21478563/

相关文章:

javascript - 使用百分比进行 css 转换以动画 dom 翻译的替代方法

javascript - 在 Google map javascript API 上画线

html - Servlet返回“HTTP状态404请求的资源(/Servlet)不可用”

java - 使用 Hibernate 和 JSP 无法保存表创建和数据

javascript - D3/CSS Dom向上遍历/选择

jquery - 在单个页面上使用 jQuery 禁用 CSS 规则

google-maps - 没有图钉/图标的 map

eclipse - 编辑jsp文件时在eclipse中每个标签后换行

html - Div 降低而不是按钮

java - Places SDK 中的 APIException 9011 和 9010 错误