Html 限制显示：高度为动态时的表格行/单元格元素高度

我需要使一个div在其内容溢出时可滚动。由于布局的原因，div是

显示：表/表行

系统的一部分

当内容超过高度时，底部边栏容器需要允许滚动。我的问题是，对于这种类型的布局，CSS无法将较低的div锁定到其父级的动态确定高度（

.holder

）。它或者需要是一个%的高度，或者仅仅是它的父代高度的100%，这太大了

我的目标是用纯CSS来解决这个问题，这样当某些东西改变了边栏元素的高度时，我们就可以避免运行javascript

.wrapper-page { position: absolute; top: 38px; bottom: 10px; left: 10px; right: 10px; overflow: hidden; }
.sidebar { width: 25%; height: 100%; }

.holder { width: 100%; height: 100%; display: table; table-layout: fixed }
.holder > div:first-child { height: 25%; max-height: 25%; }
.holder > div { display: table-row; table-layout: fixed  }

由于这种布局，如果我们使用

overflow-y:scroll

，则只有

侧栏

会正确滚动，但这会滚动整个侧栏

.holder>div:last child

应该滚动

<div class="wrapper-page">
    <div class="sidebar">
        <div class="holder">
            <div>
                box one<br>
            </div>
            <div>
                box two<br>
            </div>
        </div>
    </div>
</div>

方框一

方框二

我使用以下方法在本地工作：

div {
  outline: 1px solid blue;
}
.wrapper-page {
  position: absolute;
  top: 38px;
  bottom: 10px;
  left: 10px;
  right: 10px;
  overflow: hidden;
}
.sidebar {
  width: 25%;
  height: 100%
}
.holder {
  width: 100%;
  overflow: hidden;
}
.holder > div {
  overflow-y: scroll;
}
.holder > div:first-child {
  height: 25%;
}
.holder > div:last-child {
  height: 75%;
}

我尝试将其粘贴回CodePen，但在他们的虚拟环境中不起作用。但是，它在一个平面HTML文件中工作。不幸的是，我没有办法知道这是否会为你工作，除了张贴它作为一个可能的答案，供你审查

说明： 这里的警告实际上是表结构本身。您必须使用剩余的高度大小。这似乎是一种权衡；没有JS需要显式CSS，而JS可以更灵活地使用CSS

此外，您还可以在包装页上使用另一个类，以便可以隐藏上部面板并展开下部面板，如下所示：

.wrapper-page.hide-upper .holder > div:first-child { display: none !important; }
.wrapper-page.hide-upper .holder > div:last-child { height: 100% !important; }

---

它可能不是你想要的100%，但是根据你对你想要实现的目标的描述，听起来它也会做同样的事情。

你能使用

框大小：边框框吗？如果是这样，请通过百分比设置高度，然后将溢出设置为您喜欢的任何配置。我不能使用框大小调整，因为我们别无选择，只能支持IE7，而polyfill对这一配置的性能消耗太大。因此，您是说
.holder>div:last child{overflow-y:scroll；}
不起作用？这是IE7要求的限制还是其他什么？它不起作用，因为没有任何溢出。我必须使用
表格行
布局，以便最后一个div将正确填充
.sidebar
中的剩余高度（用户可以折叠顶部窗格，因此我无法确定高度）。这解决了高度问题，但表格会扩展到其内容的高度，因此无法溢出div。唯一可能的解决方案是使用具有最大高度的div-但仅使用css，div无法知道正确的高度值。在这种情况下是否也不可能实际使用表格？谢谢，之所以这样做，是因为高度：75%，不能使用，因为在实际的应用程序中，用户可以折叠顶部窗格，这会增加下部窗格的高度。不使用高度是允许表格布局自动调整大小的原因，而无需js。谢谢你的尝试。目前，我只是使用javascript来计算正确的高度。哦，是的，不过问题很有趣。如果您允许他们关闭上部面板，可以向容器添加一个类，这样它就可以隐藏顶部面板并扩展底部面板？