डिव (# मैप) ऊंचाई और चौड़ाई 100%

सेट करना मैं div (map) में 100% चौड़ाई और ऊंचाई सेट कर रहा हूं, लेकिन मेरा नक्शा पृष्ठ का केवल आधा दिखाता है। मैं div कंटेनर के नीचे पूरा नक्शा प्रदर्शित करना चाहता हूं।डिव (# मैप) ऊंचाई और चौड़ाई 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>

स्रोत

2013-05-24 Sravan

(अपने बाहरी सीएसएस फ़ाइल या इनलाइन style टैग करने के लिए) इस जोड़ें:

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

स्रोत

2013-05-24 20:20:06 Xarcell

यह कहने लायक हो सकता है कि उस कोड को जोड़ा जाना चाहिए, भले ही यह आपके लिए स्पष्ट हो! –

इस प्रयास करें:

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

स्रोत

2013-05-24 20:44:23 math487

बूटस्ट्रैप 3.0 चहचहाना बूटस्ट्रैप पर एक .container सीएसएस वर्ग कहते हैं जो नक्शा कंटेनर ओवरराइड करता है। नतीजा यह है कि अधिकतम-चौड़ाई .map .container पर सेट है। इसे ओवरराइड करने के लिए जोड़ें और नक्शा को पूर्ण चौड़ाई भरें:

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

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

स्रोत

2013-09-17 11:56:36

डिव (# मैप) ऊंचाई और चौड़ाई 100%

उत्तर

संबंधित मुद्दे