CSS table 布局 - table-单元格高度在减小 window 尺寸时不会减小

Question

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

您可以验证是这个问题fiddle。

div 调用的 map 实际上是一个 table-cell，我不知道为什么当我降低 window 的高度时它没有反映在 table-cell，但只有当我减少 height 时（减少宽度时一切正常）。

请查看 chrome 或 firebug 的控制台以查看 console.log("New extent: ", extent) 的结果。 fiddle的完整代码如下：

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

当你增加高度时它会起作用，但当你降低高度时就不会了。

By CSS 2.1 rules, the height of a table cell is “the minimum height required by the content”.

由于您是通过加载地图动态填充 div 内容，因此整个高度已被占用，如果您试图将其变小，它不会允许您这样做，因为内容仍然存在。那么，为什么不更改您的布局，这样您就不再需要 display: table-cell;？

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

JSFiddle demo

Answer 2

非常感谢您的评论，Dark。我并没有真正意识到这个 "problem" 和 table-cell。现在，是时候让它发挥作用并按照您提供的信息进行操作了。这是最终有效的代码（更简单，更少 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>

CSS table 布局 - table-单元格高度在减小 window 尺寸时不会减小

CSS table layout - table-cell height not reducing when reducing window size

html

css

tablecell