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/