溢出表格行内的100％高度的div [英] Overflow for div with 100% hieght 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;
}

这会尽可能减少单元格的高度 - $ c> #sidebar overflow-，但由于 #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>

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