Question

我阻止了我的网站的新页面，该页面将响应一个分隔2列的滑动分隔。在左栏中，我有几个垂直堆叠的div，我想在其底部溢出时滚动其内容。我只想滚动div而不是整个页面。

我已经将overflow-y设置为scroll，虽然这确实产生了滚动条，但它仍然会扩展整个页面而不是识别窗口的边缘。我有一种感觉，它与父容器大小没有修复有关，我认为设置为max-height: 100%;会解决这个问题，但事实并非如此。

这是jfiddle jfiddle

它基本上只是来自我的沙箱网站wtb.dsdcs.com的抓取，但它似乎在jfiddle中表现相同，所以它应该足够了。

只是一个免责声明：有一个视频，我在网站和jfiddle中的自动播放完整，如果它的容器是问题的一部分，所以可能需要关闭扬声器。

澄清：#PlayList是我希望能够滚动的元素。

Answer 1

你需要给你的Playlist班级一个高度 - （例如400px）。然后，当您添加更多a项时，您应该获得滚动条。您可以删除max-height，因为不需要。

如果你想要一个动态高度的播放列表，它总是占用高度的剩余部分，你可以添加一个jQuery脚本：

var h1 = $(window).height();
var h2 = $('.videowrapper').height();
$('.playlist').height(h1-h2);

由于videoWrapper设置为占据高度的50％，另一种方法可能是将playlist设置为另外50％。所以将其设置为height: 50%。

.playlist {    
    padding: 10px;
    font-size: 12px;
    overflow-y: scroll;
    height: 50%;
    position: relative;
}

编辑10月17日：

以上原因可能不适用于所有浏览器可能是因为您的实施。就像我在下面的评论中所说的那样，你不应该使用表格类型的显示属性，因为它们不能很好地支持overflow。

W3C甚至说overflow属性仅适用于块类型元素LINK。 MDN建议使用相同的LINK。

因此，在任何overflow类型元素上实现table将始终是一个棘手和冒险的方法，因为浏览器支持问题或浏览器显示不一致应该是预期的。要获得完全支持的解决方案，我担心您必须尝试其他显示属性，例如flex或block。

不幸的是，没有办法在表格元素上获得overflow完全支持的解决方案，因此无法提供此类答案。这里唯一真正解决问题的真正“解决方案”是对整个网站进行全面（或部分）的改造。

但是，我希望以上内容为您提供了下一步操作的方向，因此对您来说是一个可以接受的答案。

祝你好运！