Question

我需要一个表来占用100％的页面，并排放置2个单元格，右边的单元格可以滚动溢出内容。

这是我需要的一个工作示例： https://jsfiddle.net/way0316f/1/ 这个小提琴和我需要的唯一区别是第二个TD标签指定高度（以像素为单位）而不是百分比：

<td style="border:1px solid green; height:400px">

在阅读了一些评论后，很明显这是一个Firefox问题，并且它可以在Chrome中运行。似乎问题是只要使用百分比设置高度，表格单元格中的溢出就不会被触发。当使用像素（如小提琴）设置高度时，溢出会按预期触发。

因此即使将所有内容设置为100％高度（包括html和body标签），该表仍将扩展到窗口的100％以上，并且不会触发溢出。

Answer 1

有一个div元素控制表可以容纳的大小。

<div style="height:400px">

将其更改为100％时，它适合左列，因为另一列可以滚动。当我将高度改为1080px时，它适合屏幕。你可以看到我的作品here.

Answer 2

适用于Chrome和Firefox。

＆＃13;

html,
body {
  height: 100%;
  margin: 0;
}

table {
  border: 1px solid red;
  width: 100%;
  height: 100%;
}

tr {
  vertical-align: top;
}

td:first-child {
  border: 1px solid blue;
  width: 50%;
}

td:last-child {
  border: 1px solid green;
  position: relative;
}

td:last-child > div {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: auto;
}

＆＃13;

<body>
  <table>
    <tr>
      <td>Side Menu</td>
      <td>
        <div>
          Scrollable Cell
          <br> Scrollable Cell
          <br> Scrollable Cell
          <br> Scrollable Cell
          <br> Scrollable Cell
          <br> Scrollable Cell
          <br> Scrollable Cell
          <br> Scrollable Cell
          <br> Scrollable Cell
          <br> Scrollable Cell
          <br> Scrollable Cell
          <br> Scrollable Cell
          <br> Scrollable Cell
          <br> Scrollable Cell
          <br> Scrollable Cell
          <br> Scrollable Cell
          <br> Scrollable Cell
          <br> Scrollable Cell
          <br> Scrollable Cell
          <br> Scrollable Cell
          <br> Scrollable Cell
          <br> Scrollable Cell
          <br> Scrollable Cell
          <br> Scrollable Cell
          <br> Scrollable Cell
          <br> Scrollable Cell
          <br> Scrollable Cell
          <br> Scrollable Cell
          <br> Scrollable Cell
          <br> Scrollable Cell
          <br> Scrollable Cell
          <br> Scrollable Cell
          <br> Scrollable Cell
          <br> Scrollable Cell
          <br> Scrollable Cell
          <br> Scrollable Cell
          <br> Scrollable Cell
          <br> Scrollable Cell
          <br> Scrollable Cell
          <br> Scrollable Cell
          <br> Scrollable Cell
          <br> Scrollable Cell
          <br> Scrollable Cell
          <br> Scrollable Cell
          <br> Scrollable Cell
          <br> Scrollable Cell
          <br> Scrollable Cell
          <br> Scrollable Cell
          <br> Scrollable Cell
          <br> Scrollable Cell
          <br> Scrollable Cell
          <br> Scrollable Cell
          <br> Scrollable Cell
          <br> Scrollable Cell
          <br> Scrollable Cell
          <br> Scrollable Cell
          <br> Scrollable Cell
          <br> Scrollable Cell
          <br> Scrollable Cell
          <br> Scrollable Cell
          <br> Scrollable Cell
          <br> Scrollable Cell
          <br> Scrollable Cell
          <br> Scrollable Cell
          <br> Scrollable Cell
          <br> Scrollable Cell
          <br> Scrollable Cell
          <br> Scrollable Cell
          <br> Scrollable Cell
          <br> Scrollable Cell
          <br> Scrollable Cell
          <br> Scrollable Cell
          <br> Scrollable Cell
          <br> Scrollable Cell
          <br> Scrollable Cell
          <br> Scrollable Cell
          <br> Scrollable Cell
          <br> Scrollable Cell
          <br> Scrollable Cell
          <br> Scrollable Cell
          <br> Scrollable Cell
          <br>
        </div>
      </td>
    </tr>
  </table>

</body>

＆＃13;

滚动表格单元格，表格高度为100％

2 个答案: