CSS stretching to 100% Height
<p>I'm trying to accomplish something very simple. My poor rusty CSS skills do not help one bit.</p>

<p>This is want to achieve:
<a href="https://i.stack.imgur.com/bac3p.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bac3p.jpg" alt="enter image description here"></a></p>

<p>I cannot make it happen. If I use <code>height: 100%</code> it works when there isn't much  text, but when I add a lot of Lorem Ipsum, the content div gets stretched and the left menu div doesn't scale with it.</p>

<p>I don't want to use JavaScript, just clean CSS if it's that's possible.</p>

<p>HTML:</p>

<pre><code>&lt;html&gt;
&lt;head&gt;
&lt;title&gt;test&lt;/title&gt;
&lt;link rel="stylesheet" type="text/css" href="css/style.css"&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id="header"&gt;Header&lt;/div&gt;
&lt;div id="menu"&gt;Menu&lt;/div&gt;
&lt;div id="content"&gt;Content (paste a lot of lorem ipsum here and menu doesn't stretch)&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>CSS</p>

<pre><code>body
{
    margin: 0;
    height: 100%;
    background-color: gray;
}
#header
{
    height: 50px;
    background-color: white;
    border: 1px solid black;
}
#menu
{
    width: 225px;
    float: left;
    height: calc(100% - 50px);
    background-color: white;
    border: 1px solid black;
}
#content
{
    overflow: auto;
    background-color: white;
    border: 1px solid black;
}
</code></pre>