div溢出，表格行内高度为100％ [英] Overflow for div with 100% height inside of table row

问题描述

我想创建一个表，其中一行包含其内容，另一行占据其余空间.如果第二行的内容溢出，我希望它滚动.我可以在chrome上实现这些效果:

I'd like to create a table with one row that wraps its content, and a second row that that takes up the rest of the space. If the second row's content overflows, I'd like it to scroll. I can achieve these effects on chrome:

http://jsfiddle.net/a0g8bcu0/

#container {
  width: 500px;
  height: 100px;
  border: 3px solid red;
}
#sidebar {
  height: 100%;
  background-color: yellow;
  overflow-y: scroll;
}
#row {
  height: 100%;
}

<table id="container">
  <tr>
    <td>
      <div>This is a little bit of text</div>
    </td>
  </tr>
  <tr id="row">
    <td id="cell">
      <div id="sidebar">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
        survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
        publishing software like Aldus PageMaker including versions of Lorem Ipsum.
      </div>
    </td>
  </tr>
</table>

但是，这在Firefox上不起作用.谁能给我一些见识?我意识到表格中的高度缩放可能有些奇怪.任何帮助将不胜感激.

However, this doesn't work on Firefox. Can anyone give me some insight? I realize that height scaling in tables can be a bit strange. Any help would be appreciated.

推荐答案

添加此内容:

#cell {
    height: 0;
}

这会尽可能降低单元格的高度-导致 #sidebar 溢出–，但是由于 #row 仍具有 height:100％，它将覆盖表格的剩余空间.

This reduces the height of the cell as much as possible –making #sidebar overflow–, but since #row still has height: 100%, it will cover the remaining space of the table.

#container {
  width: 500px;
  height: 100px;
  border: 3px solid red;
}
#sidebar {
  height: 100%;
  background-color: yellow;
  overflow-y: scroll;
}
#row {
  height: 100%;
}
#cell {
  height: 0;
}

<table id="container">
  <tr>
    <td>
      <div>This is a little bit of text</div>
    </td>
  </tr>
  <tr id="row">
    <td id="cell">
      <div id="sidebar">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
        survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
        publishing software like Aldus PageMaker including versions of Lorem Ipsum.
      </div>
    </td>
  </tr>
</table>

这篇关于div溢出，表格行内高度为100％的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！