Réglage de la hauteur et de la largeur Div (#Map) à 100%

Je règle 100% largeur et hauteur sur la div (carte), mais ma carte ne montre que la moitié de la page. Je voudrais afficher la carte complète ci-dessous le conteneur div. J'utilise bootstrap et esri JavaScript API pour construire la page.Réglage de la hauteur et de la largeur Div (#Map) à 100%

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

Source

2013-05-24 Sravan

Ajouter ce (à votre fichier CSS externe ou en ligne tag style):

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

Source

2013-05-24 20:20:06 Xarcell

Cela pourrait valoir la peine d'indiquer où ce code devrait être ajouté, même si c'est évident pour vous! –

essayez ceci:

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

Source

2013-05-24 20:44:23 math487

Au bootstrap bootstrap 3.0 twitter ajoute une classe css .container qui remplace le conteneur de la carte. Le résultat est qu'une max-width est définie sur le fichier .map .container. Ajoutez ceci pour surcharger et faire en sorte que la carte remplisse toute la largeur:

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

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

Source

2013-09-17 11:56:36

Réglage de la hauteur et de la largeur Div (#Map) à 100%

Répondre

Questions connexes