聚合物佈局屬性在整個視口上拉伸自定義元素

我所擁有的是一個定製聚合物元素嵌套在主頁上的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。

不幸的是，我不知道我必須使用哪種聚合物來達到這個目標，以及我必須使用哪些標籤。有人可以幫我嗎？

來源

2014-09-02 mackcmillion

編輯從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。

來源

2014-09-03 16:11:17 robdodson

IMO，而不是混合％和佈局，你最好使用整個堆棧的佈局屬性。 Iow，' ...'。 http://jsbin.com/dumow/1/edit – 2014-09-03 21:51:08

嘿謝謝你的答案。只要自定義元素是''的直接子元素，這對我來說很好。但是當我把自定義元素放入一個''時，它完全破壞了佈局。任何建議如何解決這個問題？ – mackcmillion 2014-09-09 18:56:38

明白了。將'fit'佈局屬性添加到'core-header-panel'的內容（這在我的情況下是一個'core-animated-pages'）和我的自定義元素對我來說是個訣竅。 – mackcmillion 2014-09-10 11:36:44

聚合物佈局屬性在整個視口上拉伸自定義元素

回答

相關問題