Question

我刚开始玩聚合物元素，请注意我绝对不认为自己是网络开发人员（因此HTML / CSS / Javascript根本不是我的强项）。当div的内容是聚合物元素（即Shadow DOM）时，我无法制作动态高度div容器。我可以使用像素（即height: 250px）成功更改CSS类中容器的高度，但是将height属性更改为; height: auto，或 height: auto !important具有意想不到的影响，基本上使div消失（没有高度）。我也尝试将容器的overflow-y设置为auto，visible，甚至height = 1％和overflow-y = hidden（已在某处建议）的组合。我怀疑这可能与Shadow DOM有关，而父容器不知道Shadow DOM元素的高度？有没有人能够在聚合物元件周围实现动态高度DIV？如果需要，我会跟进代码示例。

Answer 1

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

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

Answer 2

您是否已将display: block添加到自定义元素中？自定义元素默认为display: inline，这可能导致此问题。在Polymer中，您可以这样做：

<polymer-element name="my-name>
  <template>
    <style>
      :host {
        display: block;
      }
    </style>

    <!-- ... -->
  </template>
  <script>
    Polymer('my-name', {
      //...
    });
  </script>
</polymer-element>

Answer 3

我最终转向聚合物布局属性和正确的div结构来解决这个问题。这是一个例子。请注意，CSS中根本没有设置高度属性。这允许动态高度和宽度div（水平对齐）响应并在较小的视口中垂直包裹。

<polymer-element name="my-element">
<template>
    <style>

        myContainer {
            padding-top: 10px;
            padding-right: 25px;
            padding-left: 25px;
            padding-bottom: 10px;
            margin-top: 0px;
            margin-right: 10px;
            margin-left: 10px;
            margin-bottom: 10px;
            border-bottom-left-radius: 5px;
            border-bottom-right-radius: 5px;
            box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.50);
            /* z-index: -1; */
        }

        myHeading {
            margin-top: 10px;
            margin-right: 10px;
            margin-left: 10px;
            margin-bottom: 0px;
            /*padding-bottom: 10px;
            padding-top: 10px;*/
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
            box-shadow: 0 2px 1px 0 rgba(0, 0, 0, 0.50);
            text-align: center;
            background-color: lightgrey;
            color: black;
            font-weight: 700;
            /* z-index: -1; */
        }

    </style>

    <div id="myContainers" horizontal layout wrap>

        <div>
            <myHeading name="Container 1" horizontal layout center>
                <div flex>Container 1</div>
                <paper-menu-button icon="more-vert" halign="right">
                    <paper-item label="Edit" on-tap="{{ editItem }}"></paper-item>
                    <paper-item label="Copy"></paper-item>
                </paper-menu-button>
            </myHeading>
            <myContainer vertical layout>
                Container contents here
            </myContainer>
        </div>

包含Polymer元素的DIV的动态高度（Shadow DOM）

3 个答案: