Benutzerdefinierte Element Füllung Papier-Scroll-Header-Panel Inhalt Höhe Bereich

Mit dem Polymer-Starter-Kit entfernt ich Klasse content und iron-pages. Ich versuche, mein benutzerdefiniertes Element <main-content> zu machen, um den Ansichtsport von paper-scroll-header-panel zu füllen.Benutzerdefinierte Element Füllung Papier-Scroll-Header-Panel Inhalt Höhe Bereich

Wie kann ich das individuelle Element die Höhe (wie 100%) füllen von paper-scroll-header-panel Inhaltsbereich ohne harte Codierung eines px Wert?

index.html:

<!-- Main Area --> 
    <paper-scroll-header-panel main id="headerPanelMain" class="fit"> 
    <!-- Main Toolbar --> 
    <paper-toolbar id="mainToolbar"> 
     <paper-icon-button id="paperToggle" icon="menu" paper-drawer-toggle></paper-icon-button>  

     <span class="space"></span> 

     <!-- Application name --> 
     <div class="middle middle-container"> 
     <div class="app-name"></div> 
     </div> 

     <!-- Application sub title --> 
     <div class="bottom bottom-container"> 
     <div class="bottom-title">John and Olivia are getting married!</div> 
     </div> 
    </paper-toolbar> 

    <!-- Main Content --> 
    <div> 
     <section data-route="home"> 
      <main-content class="focus-target" tabindex="-1"></main-content> 
     </section> 
    </div> 
    </paper-scroll-header-panel> 
</paper-drawer-panel>

benutzerdefiniertes Element:

<dom-module id="main-content"> 
    <template> 
    <style include="iron-flex iron-flex-alignment"> 
     :host { 
     height: 100%; 
    } 

     #main { 
     background: black; 
     width: 100%; 
     height: 100%; 
     background-image: url('../img/main-background.jpg'); 
     background-position: center; 
     background-repeat: no-repeat; 
     min-width: 500px; 
     min-height: 500px; 
     } 

    </style> 
     <div id="main"> 
    </div> 
    </template> 

    <script> 
    Polymer({ 
     is: 'main-content' 
    }) 
    </script> 
</dom-module>

Hinweis: Es ist schwer, im Bild zu sehen, aber auf der Unterseite befindet sich eine weiße Bar, wo Das Element sollte die Höhe des Ansichtsfensters/Bedienfelds erweitern

Quelle

2016-05-02 dman

Ändern Sie den Stil in <dom-module id="main-content"> von

<style include="iron-flex iron-flex-alignment"> 
    :host { 
    height: 100%; 
} 

    #main { 
    background: black; 
    width: 100%; 
    height: 100%; 
    background-image: url('../img/main-background.jpg'); 
    background-position: center; 
    background-repeat: no-repeat; 
    min-width: 500px; 
    min-height: 500px; 
    } 

</style>

<style include="iron-flex iron-flex-alignment"> 
    :host { 
    @apply(--layout); 
    } 

    #main { 
    background: black; 
    background-image: url('https://cdn.meme.am/instances/65207274.jpg'); 
    background-position: center; 
    background-repeat: no-repeat; 
    min-width: 500px; 
    min-height: 500px; 
    @apply(--layout-flex); 
    } 

</style>

und für die

<div> 
    <section data-route="home"> 
     <main-content class="focus-target" tabindex="-1"></main-content> 
    </section> 
</div>

eine Klasse hinzufügen, um es identifizierbaren

<div class="main-content"> 
     <section data-route="home"> 
      <main-content class="focus-target" tabindex="-1"></main-content> 
     </section> 
    </div>

und fügen Sie dies dem <head> Tag Stile, sie anzuwenden und es enthält <main-content> Element:

<style is="custom-style"> 
    .main-content,main-content { 
     @apply(--layout-fit); 
    } 
</style>

Plunker example

Quelle

2016-05-04 06:44:21

Dank! Ich wünschte, ich könnte das herausfinden. Ich hätte nie gedacht, es so zu machen. – dman

Benutzerdefinierte Element Füllung Papier-Scroll-Header-Panel Inhalt Höhe Bereich

Antwort

Verwandte Themen