Установка высоты и ширины Div (#Map) на 100%

Я устанавливаю 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>

javascript twitter-bootstrap esri
person Sravan    schedule 24.05.2013    source источник

Ответы (3)


arrow_upward
2
arrow_downward

Добавьте это (в свой внешний файл CSS или встроенный тег style):

html body {
    height: 100%;
    min-height: 100%;
}
person Community    schedule 24.05.2013
comment
Возможно, стоит указать, куда следует добавить этот код, даже если для вас это очевидно! - person Neil Townsend; 25.05.2013

arrow_upward
1
arrow_downward

В bootstrap 3.0 twitter bootstrap добавляет класс .container css, который переопределяет контейнер карты. В результате для .map .container устанавливается максимальная ширина. Добавьте это, чтобы переопределить и сделать так, чтобы карта заполняла всю ширину:

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

.map .container{
    max-width: 100%;
}
person David Wilton    schedule 17.09.2013

arrow_upward
0
arrow_downward

попробуй это :

#map{height:100%; min-height:100%;}
person math487    schedule 24.05.2013