CSS表格布局-減小窗口大小時表格單元的高度不會減小

Question

我在基於CSS表的布局上遇到了一個問題，即display:table ， display:table-row ， display:table-cell等。

可以驗證的問題是這樣的小提琴 。

稱為map的div實際上是一個table-cell ，我不知道為什么當我減小窗口的高度時它沒有反映在table-cell ，但是只有當我減小height （當減小寬度時，一切正常）。

請查看chrome或firebug的控制台，以查看console.log（“新擴展區：”，擴展區）的結果。 小提琴的完整代碼如下：

 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>