Div（#Map）の高さと幅を100％に設定

div（地図）に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>

出典

2013-05-24 Sravan

（外部CSSファイルまたはインラインstyleタグに）これを追加します。

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

出典

2013-05-24 20:20:06 Xarcell

あなたに明白であっても、そのコードを追加する必要があることを示す価値があります。 –

はこの試してください：ブートストラップ3.0 Twitterのブートストラップで

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

出典

2013-05-24 20:44:23 math487

をどの.containerのCSSクラスを追加しますマップコンテナをオーバーライドします。その結果、.map .containerに最大幅が設定されます。これを上書きして、地図を完全な幅に塗りつぶすようにしてください：

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

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

出典

2013-09-17 11:56:36

Div（#Map）の高さと幅を100％に設定

答えて

関連する問題