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

Question

基于CSS表布局存在一个问题，即使用display:table，display:table-row，display:table-cell等等。

您可以验证问题是fiddle。

称为地图的div实际上是table-cell，我不知道为什么当我减少窗口的高度时它不会反映在table-cell中，但只有当我减少{ {1}}（当减小宽度时一切正常）。

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

height

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;
}

Answer 1

当你增加高度时它会起作用，而不是当你把高度变小时。

  

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

由于您通过加载地图动态填充div内容，因此占用了整个高度，如果您尝试将其缩小，则不会允许您使用，因为内容仍然存在。 那么为什么不更改布局，以便不再需要display: table-cell;？

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

JSFiddle demo

Answer 2

非常感谢你的评论，Dark。我并没有真正意识到这个＆＃34;问题＆＃34;与表格单元格。现在，是时候让它工作并遵循您提供的信息。这是最终的代码（更简单，更简单）：

＆＃13;

＆＃13;

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);
	});
});

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;