Ustawienie Div (#Map) wysokość i szerokość na 100%

Ustawiam 100% szerokość i wysokość na div (map), ale moja mapa pokazuje tylko połowę strony. Chciałbym wyświetlić pełną mapę poniżej kontenera div.Ustawienie Div (#Map) wysokość i szerokość na 100%

Używam bootstrap i JavaScript API api do zbudowania strony.

<!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>

Źródło

2013-05-24 Sravan

Dodaj ten (do zewnętrznego pliku css lub inline style tag):

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

Źródło

2013-05-24 20:20:06 Xarcell

Może warto napisać, gdzie ten kod powinien zostać dodany, nawet jeśli jest to dla ciebie oczywiste! –

spróbuj tego:

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

Źródło

2013-05-24 20:44:23 math487

Na bootstrap 3,0 twitter bootstrap dodaje klasę css, który .container zastępuje kontener mapy. W rezultacie ustawiona jest maksymalna szerokość na .map .container. Dodaj to, aby zastąpić i sprawić, że mapa wypełni całą szerokość:

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

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

Źródło

2013-09-17 11:56:36

Ustawienie Div (#Map) wysokość i szerokość na 100%

Odpowiedz

Powiązane problemy