Setting Div (#Map) height and width to 100%
I'm setting 100% width and height to the div (map), but my map shows only half of the page. I would like to display the full map below the div container.
I am using bootstrap and esri JavaScript api to build the page.
<!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>
Answer
Add this (to your external css file or inline style tag):
html body {
height: 100%;
min-height: 100%;
}