2013-05-24 4 views
5

div (map)에 100 % 너비와 높이를 설정하고 있지만지도의 절반 만 보여줍니다. div 컨테이너 아래에 전체지도를 표시하고 싶습니다.Div (#Map) 높이와 너비를 100 %로 설정하십시오.

페이지를 작성하기 위해 부트 스트랩 및 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> 

답변

2

가 (외부 CSS 파일이나 인라인 style 태그)이 추가 :

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

하면 해당 코드가 당신에게 분명하더라도, 추가 할 위치를 알리는 가치가있을 수 없습니다! –

0

하면이 시도 :

는 부트 스트랩 3.0 트위터 부트 스트랩에서
#map{height:100%; min-height:100%;} 
1

가 .container CSS의 클래스를 추가하는 지도 컨테이너를 재정의합니다. 결과적으로 최대 너비가 .map .container에 설정됩니다. 무시하고지도 전체 폭을 채울 수 있도록하려면이 옵션을 추가

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

.map .container{ 
    max-width: 100%; 
} 
관련 문제