Bom criei um div principal para comportar todos os elementos da página. Dentro dele tenho 3 outros `divs`: 1 barra de menu, 1 barra lateral, 1 area de conteudo.

HTML:

    <div class="principal">
      <div class="barra_menu">
        Barra de menu
      </div>
      <div class="menu_lateral">
        <!--Como se estende esse div até o fim da página/elemento pai-->
        Menu lateral:<br>.<br>.<br>.
      </div>
      <div class="area_conteudo">
        Area de conteudo:<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.
      </div>
    </div>


CSS:

    .principal{background-color:red;height:100%;}
    .barra_menu{background-color:gray;widht:100%;}
    .menu_lateral{background-color:blue;width:30%;float:left;}
    .area_conteudo{background-color:green;width:70%;float:left;}

Eu quero que o menu lateral se estenda da posição de onde ele se encontra até o fim da página, mas não sei a solução. 

Gostaria de obter uma solução baseada apenas em HTML/CSS preferencialmente sem utilizar posicionamento absoluto.

A seguir um exemplo visual do que eu quero fazer: https://jsfiddle.net/m17wuaLc/2/