问题现象
使用ArcGIS JavaScript API V3.27创建了一个最简单的地图页面，创建map对象时给传入了一个div，样式设的是宽高均为100%，但是在浏览器看到的是地图高度只有400px。
代码片段
<style>
#map{ height: 100%; width: 100%;}
</style>
<script>
var map;
require([
"esri/map", "dojo/domReady!"
], function(
Map,
) {
map = new Map("map", {
basemap: "topo",
center: [-116.093, 34.218],
zoom: 7
});
});
</script>
</head>
<body>
<div id="map">
</div>
</body>
截图
原因分析
在GeoNet上看到esri员工的一个回答：
400px is the default size of the map container.
其实原因就出在设置的div属性：#map{width:100%;height:100%} ,虽然设置的是100%但由于其父级元素未设置宽高属性，导致mapdiv的实际高度为0,因此地图高度采用默认值400px。说到底还是不懂HTML基础。
解决方法
找到问题原因就好解决了，只要把 map 的所有父级元素宽高属性设置一下就行了。
代码片段
<style>
html,body{height:100%;width:100%}
#map{ height: 100%; width: 100%;}
</style>
效果截图
问题总结
其实对于这个页面来说，还有一个解决办法，不用设置html,body的属性，只需要给 #map 加一个属性 position:absolute ,该场景下是可以实现地图铺满的。其主要利用的是元素绝对定位时会去找除 {position:static} 之外的父级包含块。在该例子中是找不到这种父元素的（也就是无依赖绝对定位），则其包含块就是初始包含块（浏览器视口）。因此*#map* 就有了实际的高度值(即浏览器视口高度值)，创建出的地图高度就不会采用默认的400px。
- 宽高使用百分比时，要注意其父元素是否也设置了*{width;height}* 属性，否则不会生效；
- 绝对定位的元素从文档流中脱离，并相对于其包含块进行定位，包含块由最近的position属性为relative，fixed，absolute的祖先元素所决定，如果不存在这样的祖先元素，（也就是无依赖绝对定位），则其包含块就是初始包含块，也就是viewport。这一点和相对定位是不同的。