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>

预期行为：整个设置不应超过500px的高度，因此在Firefox中也是如此。但是在Chrome和Safari中，高度值会被忽略，整个设置会获得最高元素的高度（内容3）。

发生了什么？我怎么能解决这个问题？

编辑：我的粘贴示例在Firefox中也不起作用，不知道为什么它在第一时间起作用...

Full example:

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

表格单元格高度由房间内容的大小来定义。如果指定高度，则可以将其用作最小高度。

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

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

CSS：Chrome＆amp; Safari忽略表格单元格高度

1 个答案: