Question

我目前正在尝试使用Polymer。

我所拥有的是一个嵌套在主页上core-animated-pages元素中的自定义聚合物元素。

消息来源是：

的index.html 的

<core-header-panel>

    <core-toolbar>
        [...]
    </core-toolbar>

    <core-animated-pages transitions="slide-from-right">
        [...]
        <section>
            <contact-page></contact-page>
        </section>
    </core-animated-pages>

</core-header-panel>

接触page.html中的

<polymer-element name="contact-page">
<template>
    [...]
    <div layout horizontal start-justified>

        <div class="placeholder">
        </div>

        <div class="contact-box" layout horizontal center-justified flex three>
            <div class="form-container" layout vertical>
                <h2>Contact</h2>
                <paper-input class="additional-dist" floatingLabel label="Name"></paper-input>
                <paper-input id="mail" floatingLabel label="Mail"></paper-input>
                <div layout horizontal>
                    <paper-input id="msg" multiline maxRows="4" rows="4" floatingLabel label="Message" flex></paper-input>
                </div>
                <paper-button label="Submit" on-tap="{{submit}}" self-end></paper-button>
            </div>
        </div>

    </div>
[...]
</template>
[...]
</polymer-element>

HTML文件目前显示like this in Chrome 37.

现在我想要的是黄色条（placeholder）在整个视口like this上垂直拉伸。

不幸的是，我无法弄清楚我必须使用哪种聚合物layout attribute来实现这一目标以及我必须使用哪些标签。有人可以帮我吗？

Answer 1

编辑以纳入来自sjmiles的反馈：

试一试：

<body fullbleed layout vertical>

  <polymer-element name="x-foo" layout vertical>
    <template>
      <style>
        #header {
          background: tomato;
        }
        #col {
          background: yellow;
        }
      </style>
      <div id="header" layout horizontal>
        Header
      </div>
      <div id="main" flex layout horizontal>
        <div flex id="col">Col</div>
        <div flex layout vertical>
          <div>Section 1</div>
          <div>Section 2</div>
          <div>Section 3</div>
        </div>
      </div>
    </template>
    <script>
      Polymer({

      });
    </script>
  </polymer-element>

  <x-foo flex></x-foo>

</body>

我使用fullbleed attribute to set the body to 100vh并告诉它使用flexbox垂直布局其子项。然后将x-foo设置为flex，以便填充屏幕。然后，这只是让合适的孩子屈服的问题。

此处a jsbin to preview。

聚合物布局属性，用于在整个视口上拉伸自定义元素

1 个答案: