title: Ionic custom component overlapping content
body: <p>I created custom component, which is showing footer (need to have same footer on many pages). That's code of it:</p>
  
  <pre><code>&lt;ion-footer class="fh"&gt;
    &lt;ion-toolbar&gt;
      Footer
    &lt;/ion-toolbar&gt;
  &lt;/ion-footer&gt;
  </code></pre>
  
  <p>And CSS:</p>
  
  <pre><code>.fh .toolbar-background{
    background-color: blue;
  }
  
  .fh ion-toolbar{
    min-height: 15em;
    height: auto;
    max-height: 20em;
  }
  </code></pre>
  
  <p>For example , this component named footer-h</p>
  
  <p>I'd like to use it in pages, so:</p>
  
  <pre><code>&lt;ion-header&gt;
  ...
  &lt;/ion-header&gt;
  &lt;ion-content padding&gt;
  &lt;ion-list&gt;
  ...
  &lt;/ion-list&gt;
  &lt;/ion-content&gt;
  &lt;footer-h&gt;&lt;/footer-h&gt;
  </code></pre>
  
  <p>It works, i mean footer shows, but there is problem that it's overlapping content (rest of items on list under footer and can't scroll).</p>
  
  <p>But when I'll write page like that:</p>
  
  <pre><code>&lt;ion-header&gt;
  ...
  &lt;/ion-header&gt;
  &lt;ion-content padding&gt;
  &lt;ion-list&gt;
  ...
  &lt;/ion-list&gt;
  &lt;/ion-content&gt;
  &lt;ion-footer class="fh"&gt;
    &lt;ion-toolbar&gt;
      Footer
    &lt;/ion-toolbar&gt;
  &lt;/ion-footer&gt;
  </code></pre>
  
  <p>everything is working, list is scrollable, nothing is overlaps.</p>