html - 包含 Polymer 元素(Shadow DOM)的 DIV 的动态高度

Question

我刚刚开始使用 polymer 元素，请注意，我绝对不认为自己是一名 Web 开发人员(因此 HTML/CSS/Javascript 根本不是我的强项)。当 div 的内容是 polymer 元素(即 Shadow DOM)时，我在制作动态高度 div 容器时遇到了麻烦。我可以使用像素(即 height: 250px)成功更改 CSS 类中容器的高度，但将 height 属性更改为； 高度:自动，或 height: auto !important 具有意想不到的效果，本质上使 div 消失(没有高度)。我还尝试将容器的overflow-y设置为auto、visible，甚至height = 1%和overflow-y = hide的组合(已在某处建议过)。我怀疑这可能与 Shadow DOM 有关，并且父容器不知道 Shadow DOM 元素的高度？有没有人能够实现 polymer 元件周围的动态高度 DIV？如果需要，我将跟进代码示例。

Answer 1

这可能不是一个好的解决方案，但它确实有效

:host {
    position: relative;
}
root-in-shadow {
    position: absolute;
    top:      0;
    bottom:   0;
    left:     0;
    right:    0;
    margin:   auto;
}