title: How to set div to fill in remaining place taken by the dynamically sized element
body: <p>I have this code:</p>
  <pre><code>&lt;div id=&quot;body&quot; style=&quot;height: 295px; width: 427px; position: absolute; top: 261px; left: 284px;&quot;&gt;
  
     &lt;div id=&quot;header&quot;&gt;
          Some dynamic text&lt;br/&gt;
          Some dynamic text&lt;br/&gt;
     &lt;/div&gt;
  
      &lt;div id=&quot;Content&quot;&gt; 
          &lt;textarea id=&quot;text&quot; style=&quot;width: 100%&quot;&gt; &lt;/textarea&gt;
      
          &lt;input type=&quot;file&quot; style=&quot;width: 100%&quot;&gt;
      &lt;/div&gt;
  
     &lt;div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>I want to set content div to fill remaining space of its parent. The text is generated server side and it causes the height of the header to change.</p>
  <p>The output should look like this: file input should be at the bottom of the content with text input filling remaining of the Content. Content itself fills remaining of the Body, which height is influenced by dynamic text.</p>
  <p>I am interested only in CSS solution, as this is easy to do with JS. Also, only width and height of the Body div can be hardcoded.</p>
  <p>EDIT:
  Some clarifications:</p>
  <ol>
  <li><h1>Body is fixed size</h1>
  </li>
  <li><h1>Header is dynamic size, can be of any height. If its height &gt; #Body.height, the rest will be cropped and #Content height will be 0. Alternativelly, if possible, #Header could be limited to max half of the #Body with the rest cropped or scrollable.</h1>
  </li>
  <li><h1>Content doesn't need any special clarification. It contains of fixed file input and dynamicly height textarea</h1>
  </li>
  </ol>
  <p>Thx.</p>