title: How to make a DIV fill the remaining vertical space of the browser window?
body: <p>I have this simplified code:</p>
  
  <pre><code>This is a line of text&lt;br/&gt;
  &lt;div style="background-color: orange; height: 100%"&gt;And this is a div&lt;/div&gt;
  </code></pre>
  
  <p>The div height ends up being 100% of the height of the browser window client space, which summed up with the height of the text line, is more than the window height, so you have to scroll.  </p>
  
  <p>How can I make the div height so it takes the height of the browser window <em>minus</em> the line of text?  </p>
  
  <p>Or, in other words, how can I make the div take all the free space vertically regarding what other DOM objects already occupy?</p>