5

我为 div（地图）设置了 100% 的宽度和高度，但我的地图只显示了页面的一半。我想在 div 容器下方显示完整的地图。

我正在使用引导程序和 esri JavaScript api 来构建页面。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=7, IE=9, IE=10">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
<title>Simple Map</title>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/"></script>
<link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/js/dojo/dijit/themes/claro/claro.css">
<script src="http://twitter.github.io/bootstrap/assets/js/bootstrap.js"></script>
<link href="http://twitter.github.io/bootstrap/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="http://twitter.github.io/bootstrap/assets/css/bootstrap-responsive.css"  rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/js/esri/css/esri.css">
<script>
  dojo.require("esri.map");

  function init() {
    var map = new esri.Map("map",{
      basemap:"topo",
      center:[-95.45,29.80], //long, lat
      zoom:10,
      sliderStyle:"small"

    });
  }
  dojo.ready(init);
</script>
 <style>
  #map {
    height:100%;
    width:100%;
    margin:0;
    padding:0;
  }
</style>
</head>

<body class="claro">
<div class="navbar navbar-fixed-top">
    <div class="navbar-inner">
      <div class="container">
        <a class="brand" href="#">Project Name</a>
      </div><!-- /.container -->
    </div><!-- /.navbar-inner -->
    <div id="map" class="claro"></div>
  </div><!-- /.navbar -->
</body>
</html>
4

3 回答 3

2

添加这个（到您的外部 css 文件或内联style标记）：

html body {
    height: 100%;
    min-height: 100%;
}
于 2013-05-24T20:20:06.390 回答
1

在 bootstrap 3.0 中，twitter bootstrap 添加了一个覆盖地图容器的 .container css 类。结果是在 .map .container 上设置了最大宽度。添加这个来覆盖并使地图填充完整的宽度：

html body {
    height: 100%;
    min-height: 100%;
}

.map .container{
    max-width: 100%;
}
于 2013-09-17T11:56:36.887 回答
0

尝试这个 ：

#map{height:100%; min-height:100%;}
于 2013-05-24T20:44:23.723 回答