Question

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

我在fullbleed使用正文 - 这正常工作（例如灰色区域）。

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

your-element的中间行（＆＃34; Beta 2＆＃34;）设置为flex。

预期：＆＃34; Beta 2＆＃34;展开垂直以填充整个剩余空间

观察：＆＃34; Beta 2＆＃34;获取高度= 0（在元素检查器中可验证）

如果删除flex标记，则＆＃34; Beta 2＆＃34;出现标准高度。

如果＆＃34; Beta 2＆＃34;得到style="min-height:100px"然后用这个最小高度绘制。

如果＆＃34; Beta 2＆＃34;得到一个无效的style="min-height:100%"。

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

实现这一结果的正确方法是什么？

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

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

Nested Layout with full-height element inside

Answer 1

@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

聚合物1.0解决同样问题的方法

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

它的工作原理是将<body>包装在自定义元素中，否则你必须将主体封装在一个额外的<div>

中

Answer 2

这是你想要的：jsbin

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

2 个答案: