title: HTML fit page to screen problems
body: <p>I'm developing an application for measuring and storing running/cycling tracks using OSM/Google Maps integration.</p>
  
  <p>I want it to work without any page scrolling, so the page should fill the browser window. Basically it should look as follows:</p>
  
  <pre><code>+---------------------------------+
  |     Toolbar with some buttons   |
  +---------+-----------------------+
  | Long   ^|                       |
  | list   ||                       |
  | of     ||                       |
  | routes v|        Filled         |
  +---------+         with          |
  | Route   |        Google         |
  | statis- |         Map           |
  | tics    |                       |
  +---------------------------------+
  </code></pre>
  
  <p>The list of routes is very long and should be forced to show a scrollbar. The toolbar and route statistics should shrink to the minimal needed space. My current HTML test file  is this:</p>
  
  <pre><code>&lt;html&gt;
      &lt;body style="width: 100%; height: 100%; border: 0; margin: 0"&gt;
          &lt;div style="height: 100%; max-height: 100%; border: 4px solid gray"&gt;
              &lt;table style="width: 100%; height: 100%; border-spacing: 0; border: 3px solid blue"&gt;
                  &lt;tr style="height: 30px"&gt;
                      &lt;td colspan="2"&gt;
                          &lt;div style="border: 2px solid red"&gt;Toolbar&lt;/div&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
  
                  &lt;tr&gt;
                      &lt;td style="width: 300px; border: 2px dashed orange; overflow: scroll"&gt;
                          &lt;!-- long list for testing --&gt;
                          left&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;
                          left&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;
                          left&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;
                          left&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;
                      &lt;/td&gt;
                      &lt;td rowspan="2" style="border: 2px dashed yellow"&gt;
                          map
                      &lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td style="border: 2px dashed brown"&gt;
                          bottom left
                      &lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/table&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Open that in your browser and you'll see that the outer div fills the window correctly (horizontally and vertically), but the table inside is bigger than the containing div. What I had expected was that the long list would be scrollable because of <code>overflow: scroll</code> but it doesn't.</p>
  
  <p>Any ideas or tutorials on how to solve this?</p>