Question

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

#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。谁能给我一些见解？我意识到表中的高度缩放可能有点奇怪。任何帮助将不胜感激。

Answer 1

添加：

#cell {
    height: 0;
}

这会尽可能地降低单元格的高度 - 使#sidebar溢出 - 但由于#row仍有height: 100%，它将覆盖表格的剩余空间。< / p>

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

它不是纯粹的CSS，但适用于所有浏览器：http://jsfiddle.net/a0g8bcu0/2/

$(document).ready( function(){
  $('#sidebar').height($('#sidebar').parent().height());
} );

表格行内100％高度的div溢出

2 个答案: