title: Dynamic height calculation of one component and used in another in Angular
body: <p>I have a header that is fixed on top and its height varies based on number of additional and expandable rows that it carries. Then i have another <code>&lt;main&gt;</code> element that i need to push down equivalent to the height of the <code>.base</code> + <code>.row</code> elements (and not the <code>.expandable</code>). The height can change based on browser window size so it needs to be responsive.</p>
  
  <p>Something like this:</p>
  
  <pre><code>&lt;app-header&gt;&lt;/app-header&gt;
  
  &lt;main&gt;Some content&lt;/main&gt;
  </code></pre>
  
  <p><em>Template</em> of <code>&lt;app-header&gt;</code>:</p>
  
  <pre><code>&lt;header&gt;
      &lt;section class="base"&gt;First row&lt;/section&gt;
      &lt;section class="row"&gt;Second row&lt;/section&gt;
      &lt;section class="expandable"&gt;Third row&lt;/section&gt;
  &lt;/header&gt;
  </code></pre>
  
  <p><em>Style</em> of <code>&lt;app-header&gt;</code>:</p>
  
  <pre><code>header { position: fixed; top: 0; left: 0; right: 0; }
  </code></pre>
  
  <p>Now header is a separate component in Angular (2/4). What is the best way to approach a solution for this?</p>
  
  <p>P.S: I don't think a CSS solution can work here.</p>
  
  <p><strong>EDIT</strong>: Made <code>&lt;app-header&gt;</code> into a separate component.</p>