Javascript 处理内部高度不同的聚合物元件<；核心页面>；

我有一个

，里面是

里面的

元素

包含我定义的一组自定义元素，并且在任何时间点仅显示其中一个元素。然而问题是，有些元素只占据屏幕的一部分，但仍然垂直滚动。滚动量等于

中最高的元素

预期的行为是，仅当元素超出其视图端口时才应滚动。我如何实现这种行为

演示students.html（精简版，使其更具可读性）

…
…
学生
…

我也经历过类似的斗争，但在

内部的

内部的

最后，我通过执行以下操作来调整内部页面元素并滚动它自己

在主页的css上：

core-drawer-panel, core-header-panel {
    height: 100%;
}

core-animated-pages {    << core-pages for your example
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;

    margin: 0;
    padding: 0;

    flex: 1;

    box-sizing: border-box;
}

---

试一试，让我们知道它是如何工作的。

我不知道这是否与我遇到的问题相同：使用

时，它在较小选项卡的内容之外滚动。每一页的大小都与最大的一页相同

除了用

替换

之外，什么都不起作用，这使问题神奇地消失了

我在starter项目中遇到了类似的问题，与bowser（当天）下载的版本不同。使用后者时，一个bug消失了

Tldr：也许启动项目不是最新的

---

PS：这修复了页面大小问题，而不是页面之间滚动位置保持不变的事实

请提供一个jsbin和您尝试过的代码片段。@ebidel，我已经包含了我的代码片段。您好，我在index.html中添加了主页的CSS，在index.html中添加了聚合元素的CSS，我在这里没有看到任何变化。此外，我还了解到，除非明确指定，否则聚合物中的CSS属性不会流入/流出。我还尝试过在主页中使用反向主页的CSS和polymer的CSS。但行为没有改变。PS：这是我第一次构建一个web应用程序，我正在构建一个web应用程序（我是一个移动开发人员）。这也为我带来了好处。幸运的是，我本来打算在某个时候转到核心动画页面，但花了几个小时才找到答案。考虑到你可以像使用核心页面一样使用核心动画页面，我不确定使用Bothun有什么意义幸运的是，我愚弄了自己。这对我来说根本不起作用：-（更改为核心动画页面为我解决了问题，谢谢

core-drawer-panel, core-header-panel {
    height: 100%;
}

core-animated-pages {    << core-pages for your example
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;

    margin: 0;
    padding: 0;

    flex: 1;

    box-sizing: border-box;
}

:host {
    display: block;
    flex: 1;
    box-sizing: border-box;
    overflow-y: auto;
}