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

ブートストラップ 3.0 で、twitter ブートストラップは、マップ コンテナーをオーバーライドする .container css クラスを追加します。その結果、.map .container に max-width が設定されます。これを追加してオーバーライドし、マップを完全な幅に塗りつぶします。

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 に答える