html - CSS:Chrome 和 Safari 忽略表格单元格高度

Question

这是设置:

<div id="container"> <!-- display: table -->
  <div id="row"> <!-- display: table-row -->
    <div id="content1"> <!-- display: table-cell; height: 500px -->
     The content
    </div>
    <div id="content2"> <!-- display: table-cell; height: 500px -->
     The content 2
    </div>
    <div id="content3"> <!-- display: table-cell; height: 500px; overflow: hidden -->
     The content 3, very long
    </div>
  </div>
</div>

预期行为:整个设置不应超过 500 像素的高度，Firefox 中也是如此。然而，在 Chrome 和 Safari 中，高度值被忽略，整个设置获得最高元素(内容 3)的高度。

这是怎么回事？我该如何解决这个问题？

编辑:我粘贴的示例在 Firefox 中也不起作用，不知道为什么它首先起作用......

Full example:

#container {
  display: table;
  border: 1px solid;
  overflow: hidden
}
#row {
  display: table-row;
  overflow: hidden
}
#content1 {
  display: table-cell;
  height: 500px;
  width: 30%;
  overflow: hidden
}
#content2 {
  display: table-cell;
  height: 500px;
  width: 30%;
  overflow: hidden
}
#content3 {
  display: table-cell;
  height: 500px;
  width: 30%;
  overflow: hidden
}

<div id="container">
  <!-- display: table -->
  <div id="row">
    <!-- display: table-row -->
    <div id="content1">
      <!-- display: table-cell; height: 500px -->
      The content
    </div>
    <div id="content2">
      <!-- display: table-cell; height: 500px -->
      The content 2
    </div>
    <div id="content3">
      <!-- display: table-cell; height: 500px; overflow: hidden -->
      The content 3, very long
      <br />The content 3, very long
      <br />The content 3, very long
      <br />The content 3, very long
      <br />The content 3, very long
      <br />The content 3, very long
      <br />The content 3, very long
      <br />The content 3, very long
      <br />The content 3, very long
      <br />The content 3, very long
      <br />The content 3, very long
      <br />The content 3, very long
      <br />The content 3, very long
      <br />The content 3, very long
      <br />The content 3, very long
      <br />The content 3, very long
      <br />The content 3, very long
      <br />The content 3, very long
      <br />The content 3, very long
      <br />The content 3, very long
      <br />The content 3, very long
      <br />The content 3, very long
      <br />The content 3, very long
      <br />The content 3, very long
      <br />The content 3, very long
      <br />The content 3, very long
      <br />The content 3, very long
      <br />The content 3, very long
      <br />The content 3, very long
      <br />The content 3, very long
      <br />The content 3, very long
      <br />The content 3, very long
      <br />The content 3, very long
      <br />The content 3, very long
      <br />The content 3, very long
      <br />The content 3, very long
      <br />The content 3, very long
      <br />The content 3, very long
      <br />The content 3, very long
      <br />The content 3, very long
      <br />The content 3, very long
      <br />The content 3, very long
      <br />The content 3, very long
      <br />The content 3, very long
      <br />The content 3, very long
      <br />The content 3, very long
      <br />The content 3, very long
      <br />The content 3, very long
      <br />The content 3, very long
      <br />The content 3, very long
      <br />The content 3, very long
      <br />The content 3, very long
      <br />The content 3, very long
      <br />The content 3, very long
      <br />The content 3, very long
      <br />The content 3, very long
      <br />The content 3, very long
      <br />The content 3, very long
      <br />The content 3, very long
      <br />The content 3, very long
      <br />The content 3, very long
      <br />The content 3, very long
      <br />The content 3, very long
      <br />The content 3, very long
      <br />

    </div>
  </div>
</div>

Answer 1

表格单元格的高度由房间内容的多少决定。如果您指定高度，它可能会用作最小高度。

http://www.w3.org/TR/CSS21/tables.html#height-layout

解决方案是在单元格内使用额外的 div。