Html 固定高度表中td内的滚动div

问题是：

我希望td3中的行滚动，表格不要超过红色区域。页面必须在所有屏幕格式上都可读，因此所有操作都必须使用百分比。我试着吹了又吹，但桌子还是太大了

你有什么建议给我吗？谢谢

更新

这就是我现在得到的：

但我想看看这个：

这里有一个更新的

这里有一个更新的

---

---

还有更多的信息或者我的答案修复了它吗？在你的JSFIDLE和我的JSFIDLE中，这就是你得到的。这里没有问题不，没有问题。我不想使用将td3的高度设置为固定大小的线。看到原来的提琴了。但是你认为你怎么能在不设置提琴高度的情况下得到这个呢？我不知道。。。这就是为什么我问我的问题：-）我希望它是一个相对高度，基于div1的大小。我无法计算td3的高度，它必须自动设置。在我真正的问题中，div1的高度也不是固定的，但是为了这个例子，我将它设置为500px。还有更多信息或者我的答案可以解决它吗？在你的JSFIDLE和我的JSFIDLE中，这就是你得到的。这里没有问题不，没有问题。我不想使用将td3的高度设置为固定大小的线。看到原来的提琴了。但是你认为你怎么能在不设置提琴高度的情况下得到这个呢？我不知道。。。这就是为什么我问我的问题：-）我希望它是一个相对高度，基于div1的大小。我无法计算td3的高度，它必须自动设置。在我真正的问题中，div1的高度也不是固定的，但是为了这个例子，我将它设置为500px。这没有多大变化。好的，它使滚动条可见，但仅此而已。但我想要实现的是，当您删除高度时，您可以看到：在div1中为100%。我将CSS中的注释移动了一点，以使其更清晰。顺便说一下，我使用的是FF48。您说过希望td3中的行滚动，并且表格不要超过红色区域。我认为这在这个jsfiddle中是固定的。我不明白你还想修什么所以我不应该用40vh。。。显然，我使用的浏览器无法正确处理它。谢谢你给我指明了正确的方向！！请重新打开聊天。这不会有太大变化。好的，它使滚动条可见，但仅此而已。但我想要实现的是，当您删除高度时，您可以看到：在div1中为100%。我将CSS中的注释移动了一点，以使其更清晰。顺便说一下，我使用的是FF48。您说过希望td3中的行滚动，并且表格不要超过红色区域。我认为这在这个jsfiddle中是固定的。我不明白你还想修什么所以我不应该用40vh。。。显然，我使用的浏览器无法正确处理它。谢谢你给我指明了正确的方向！！请重新打开聊天。

<div style="height: 500px; border: 1px solid red">
  <table border="1" id="table1">
    <tr>
      <td id="td1"></td>
    </tr>
    <tr>
      <td id="td2">
        <div>
          testtest
        </div>
      </td>
    </tr>
    <tr>
      <td id="td3">
        <div id="div1">
          <div>
            test
          </div>
          <div>
            test
          </div>
          <div>
            test
          </div>
          <div>
            test
          </div>
          <div>
            test
          </div>
          <div>
            test
          </div>
          <div>
            test
          </div>
          <div>
            test
          </div>
          <div>
            test
          </div>
          <div>
            test
          </div>
          <div>
            test
          </div>
          <div>
            test
          </div>
          <div>
            test
          </div>
          <div>
            test
          </div>
        </div>
      </td>
    </tr>
  </table>
</div>

    #table1 {
      height: 100%;
      width: 100%;
    }

    #td1 {
      height: 40vh;
      width:100%;
      min-height: 240px;
    }

    #td2 {}

    #td3 {
      height: 60%;
      overflow: hidden;
    }

    #div1 {
      overflow: auto;
      height: 180px;
      /*works, not what I want*/
      height: 100%;
      display:block;
      /* doesn't work*/
    }

#div1 {
  height:100%;
  overflow-y: scroll;
}