Question

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

我正在使用bootstrap和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>

Answer 1

将其添加到您的外部css文件或内联style代码中：

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

Answer 2

在bootstrap 3.0上，twitter bootstrap会添加一个覆盖地图容器的.container css类。结果是在.map .container上设置了max-width。添加此项以覆盖并使地图填充整个宽度：

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

.map .container{
    max-width: 100%;
}

Answer 3

试试这个：

#map{height:100%; min-height:100%;}

将Div（#Map）的高度和宽度设置为100％

3 个答案: