聚合物嵌套核心支架和多个垂直滚动条/滚动范围问题

Question

我的聚合物网站的当前布局有些问题，特别是在嵌套组件及其关联的滚动条方面。我将首先声明我绝对不是 CSS 大师。我希望我是，因为我可能不会像现在这样挣扎。也可以直接跳转到 jsbin URL，因为我的问题可能会变得很明显。

情况：
我目前有一个嵌套的 core-scaffold 元素，其主要内容通常需要垂直滚动，因此它的垂直滚动条会根据需要变为活动状态。但是，由于它是嵌套的，它的容器也可以启用滚动条。理想情况下，我希望在最高级别的元素上有一个滚动条，它可以将脚手架的内容滚动到其完整的垂直范围，同时也导致顶部栏像现在向下滚动时那样滑开。我还注意到脚手架主要内容的高度由加载到其中的第一页决定。不同高度的后续页面加载不会导致滚动条高度范围相应改变。

请注意，出于此 jsbin 演示的目的，我只是将加载外部内容的 iframe 插入到脚手架的内容部分。我的实际站点在内容页面中加载了一堆数据驱动的可折叠高度容器，并根据需要水平包装。由于它们的可折叠性，它们的包含页面因此具有动态高度。由于其中的容器高度不同，该高度可能因页面而异。

这里是 jsbin。谁能把我从这个 CSS 地狱中解救出来，谁就会被认为是我的英雄……

http://jsbin.com/muniqi/1/

Answer 1

在我最初的 jsbin 示例代码中，您会注意到我已将核心页面高度指定为“100vh”顶级聚合物元素（即 my-app-element）。第二级聚合物元素（即 my-scaffold-page-element）加载在上述核心页面中。因此，嵌套脚手架元素的最大高度为 100vh。再往下看，当脚手架元素的主要内容区域的高度超过其宿主的高度限制时，它会导致出现第二个“内部”滚动条，它的垂直范围与原始外部滚动条不同......所以尝试使用单独的外部滚动条不能有效地将内部内容滚动到其整个垂直范围，迫使您也使用内部滚动条来完成工作。至少可以说丑陋。

现在我知道是这种情况，减少嵌套脚手架元素的主要内容区域出现内部滚动条的可能性的一种方法是将其父元素的核心页面高度更改为远大于 100vh（400vh? ）。这样做以迂回的方式解决了问题。外部滚动条现在可用于滚动嵌套脚手架内容的整个垂直范围，而不会出现内部滚动条。

在新的 jsbin 示例（如下）中，您可以看到“修复”，它也恰好消除了对 core-scaffold 的依赖，而是更愿意以更可配置的方式利用其各个组件。

http://jsbin.com/muniqi/3/