title: Ionic 4 wrong height for ion-header and ion-footer when inside div
body: <p>I want to render some ionic components at the corner of a page, so I'm puting them inside a <code>div</code> with <code>fixed</code> position. Here's a sample code:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;title&lt;/title&gt;
      &lt;script type="module" src="https://unpkg.com/@ionic/core@latest/dist/ionic/ionic.esm.js"&gt;&lt;/script&gt;
      &lt;script nomodule src="https://unpkg.com/@ionic/core@latest/dist/ionic/ionic.js"&gt;&lt;/script&gt;
      &lt;link href="https://unpkg.com/@ionic/core@latest/css/ionic.bundle.css" rel="stylesheet"&gt;
      &lt;style&gt;
        .container {
          position: fixed;
          bottom: 10em;
          right: 2em;
          width: 30%;
          height: 30%;
          box-shadow: 0 0 0 1em;
        }
      &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div class="container"&gt;
        &lt;ion-header&gt;
          &lt;ion-toolbar color="primary"&gt;
            &lt;ion-title&gt;Header&lt;/ion-title&gt;
          &lt;/ion-toolbar&gt;
        &lt;/ion-header&gt;
        &lt;ion-content&gt;
          &lt;ion-list color=danger&gt;
            &lt;ion-item color="secondary"&gt;Here&lt;/ion-item&gt;
            &lt;ion-item color="tertiary"&gt;Some&lt;/ion-item&gt;
            &lt;ion-item color="success"&gt;Content&lt;/ion-item&gt;
          &lt;/ion-list&gt;
        &lt;/ion-content&gt;
        &lt;ion-footer&gt;
          &lt;ion-item color="warning"&gt;Footer&lt;/ion-item&gt;
        &lt;/ion-footer&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The behavior I'm getting (<code>div</code> bounds shown in black):</p>
  
  <p><a href="https://i.stack.imgur.com/qasEL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qasEL.png" alt="With header and footer"></a></p>
  
  <p>When I remove <code>ion-header</code> and <code>ion-footer</code>:</p>
  
  <p><a href="https://i.stack.imgur.com/uRAXl.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/uRAXl.png" alt="Without header and footer"></a></p>
  
  <p>Think there's a bug in height calculation (<a href="https://github.com/ionic-team/ionic/issues/15799" rel="nofollow noreferrer">closest issue</a>).</p>
  
  <p>I was hoping to reuse the header/footer logic, my content is scrollable in between.</p>
  
  <p>Is there a workaround for this?</p>
  
  <p>Any other web-component framework that implements this feature?</p>