CSS表格布局-减少窗口大小时，表格单元格高度不会降低

Question

我在基于CSS表的布局方面遇到了一个问题，即display:table、display:table-row、display:table-cell等等

你可以确认问题出在这把小提琴上。

名为map的div实际上是一个table-cell，我不知道为什么当我减少窗口的高度时，它不会反映在table-cell中，而只有当我减少height时（当减少宽度时，一切都很好）。

请看一下chrome或firebug的控制台，看看console.log（"New extent:"，extent）的结果。小提琴的完整代码如下：

var map;
    
require(["esri/map", "dojo/domReady!"], function(Map) {
  map = new Map("map", {
    basemap: "topo",
    center: [-122.45, 37.75], // longitude, latitude
    zoom: 13
  });
  map.on("resize", function(extent){
    console.log("New extent: ", extent);
  });
});

html, body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}
body {
  background-color: #FFF;
  overflow: hidden;
  font-family: "Trebuchet MS";
}
div#container {
  display:table;
  table-layout:fixed;
  width:100%; height:100%;
  border-spacing:0px;       /* Con border-spacing ya no hay que poner margin en los table-row y table-cell */
  border:0; padding:0;
}
div#row1 {
  display:table-row;
  width:100%; height:72px;
  border:0; padding:0;       /* Con border-spacing ya no hay que poner margin en los table-row y table-cell */
}
div#row2 {
  display:table-row;
  width:100%;                /* No hace falta poner height, se rellena ya todo, no se mezclan px y % */
  border:0; padding:0;       /* Con border-spacing ya no hay que poner margin en los table-row y table-cell */
}
div#header {
  z-index:1;
  display:table-cell;
  overflow:hidden;
  width:100%; height:72px;
  border:0; padding:0;       /* Con border-spacing ya no hay que poner margin en los table-row y table-cell */
  background-color:#3567AE;
}
div#map {
  z-index:1;
  display:table-cell;
  overflow:hidden;
  width:100%; height:100%;
  border:0; padding:0;
}

<link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css">
<script src="http://js.arcgis.com/3.9/"></script>
<div id="container">
  <div id="row1">
    <div id="header"></div>
  </div>
  <div id="row2">
    <div id="map"></div>
  </div>
</div>

Answer 1

当你增加高度时，它确实有效，只是当你使高度变小时无效。

根据CSS 2.1规则，表格单元格的高度是"内容所需的最小高度"。

由于您是通过加载映射来动态填充div内容的，所以整个高度都被占用了，如果您试图缩小它，它将不允许您这样做，因为内容仍然存在。那么，为什么不改变你的布局，让你不再需要display: table-cell;呢？

div#map {
  overflow:hidden;
  width:100%; 
  height: calc(100% - 72px);
  border:0; padding:0;
} 

JSFiddle演示

Answer 2

非常感谢您的评论，Dark。我并没有真正意识到表单元格的这个"问题"。现在，是时候让它发挥作用并遵循您提供的信息了。这是最后一个有效的代码（更简单，html更少）：

var map;
	
require(["esri/map", "dojo/domReady!"], function(Map) {
	map = new Map("map", {
		basemap: "topo",
		center: [-122.45, 37.75], // longitude, latitude
		zoom: 13
	});
	map.on("resize", function(extent){
		console.log("New extent: ", extent);
	});
});

html, body {
	height: 100%;
	width: 100%;
	margin:0; border:0; padding:0;
}
body {
	background-color: #FFF;
	overflow: hidden;
	font-family: "Trebuchet MS";
}
div#header {
	overflow:hidden;
	width:100%; height:72px;
	margin:0; border:0; padding:0;
	background-color:#3567AE;
}
	
div#map {
	overflow:hidden;
	width:100%; height:calc(100% - 72px);
	margin:0; border:0; padding:0;
}

<link href="http://js.arcgis.com/3.9/js/esri/css/esri.css" rel="stylesheet"/>
<link href="http://js.arcgis.com/3.9/js/dojo/dijit/themes/claro/claro.css"/>
<script src="http://js.arcgis.com/3.9/"></script>
                                                                                
<div id="header"></div>
<div id="map"></div>