如何嵌套聚合物布局以填充整个页面？

Question

我正在尝试在聚合物元素中使用聚合物布局，但我无法确定它们应该如何正确嵌套。

我在 fullbleed 上使用 body - 这工作正常（示例中的灰色区域）。

然后我添加一个聚合物元素 my-element（水平布局），在其中 另一个自定义元素 your-element（垂直布局）。

your-element（"Beta Two"）的中间行设置为flex。

预期： "Beta Two" 扩展垂直以填充整个剩余 space

观察到： "Beta Two" 得到高度 = 0（可在元素检查器中验证）

如果移除 flex 标签，则 "Beta Two" 会以标准高度显示。

如果 "Beta Two" 获得 style="min-height:100px" 则使用此最小高度绘制。

如果"Beta Two"得到一个没有效果的style="min-height:100%"。

许多其他帖子建议使用 :host {display: block} 样式，但这在这里没有帮助（请参阅 jsbin - 除非我将其应用于错误的元素？）。

达到这个结果的正确方法是什么？

jsbin: http://jsbin.com/cejizoboci/1/edit

这是我期望的最终结果：http://jsbin.com/nufemimida/1/edit

Answer 1

嗯，这就是你想要的：jsbin

Answer 2

@itboy 通过他的编辑让我走上正轨，谢谢！

所以答案是确保布局属性在父元素上。一种方法是在使用元素时添加它（itboy 的建议），但实际上也可以在元素声明中添加它，即像这样：

<polymer-element name="my-element" layout horizontal noscript>
  <template>
    <style>
      div {
        background: lightgreen;
        border: 1px dotted white;
      }
    </style>

      <div>Alpha</div>
        <your-element flex ></your-element>
      <div>Gamma</div>
  </template>
</polymer-element>

或第二个元素类似

<polymer-element name="your-element" layout vertical noscript>
  <template>
    <style>
      div {
        background: lightgreen;
        border: 1px dotted white;
      }
      #beta2 {
        color: red;
      }
    </style>

      <div>Alpha Two</div>
      <div flex id="beta2">Beta Two(flex)</div>
      <div>Gamma Two</div>
  </template>
</polymer-element>

这允许调用元素时无需提供布局属性：

<body fullbleed layout vertical style="background:lightgrey;">
  <div style="background-color:tomato">Top Line</div>
  <my-element flex ></my-element>
  <div style="background-color:tomato">Bottom Line</div>
</body>

警告：确保完整的元素链使用 layout 属性。

jsbin 这个解决方案：http://jsbin.com/cavoqipani/1/edit?html,output

同样问题的Polymer 1.0解决方案

http://jsbin.com/xaxadutoli/edit?html,output

它的工作原理是将 <body> 包裹在自定义元素中，否则您必须将正文封装在额外的 <div>

中

如何嵌套聚合物布局以填充整个页面？

How do I nest polymer layouts to fill complete page?

flexbox

polymer