title: How to stretch a table to full page height
body: <p>Now this may be extremely simple, but I being new to HTML/CSS, can't figure it out. Here's the HTML:</p>
  
  <pre><code>&lt;html&gt;
      &lt;body&gt;
          &lt;table&gt;
              &lt;tr&gt;
                  &lt;td style="width: 275px;background: gray;overflow: scroll"&gt;
                      &lt;div style="height: 1000px;width: 250px; background: green;" /&gt;
                  &lt;/td&gt;
                  &lt;td style="width: 620px;background: yellow;"&gt;
                      def
                  &lt;/td&gt;
              &lt;/tr&gt;
          &lt;/table&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And the CSS:</p>
  
  <pre><code>html,body,table
  {
      height: 100%;
      max-height: 500px;
  }
  </code></pre>
  
  <p>What I want is to make this table stretch to full page height; and in case the contents of the left cell are larger than full page height, a simple scrollbar should appear in the left cell to let user scroll through them. But instead, my code makes the whole table larger and the inner scrollbar never appears to work.</p>