Colunas de divs ajustáveis com conteúdo.

[willwalker 2]

<style type="text/css">
body, html { height: 100%; }

#menu { position: relative; display: block; float: left; width: 250px; height: 100%; background-image: url(../imagens/bg-menu.png); background-repeat: repeat-y; background-position: top left; }

#paginas { display: block; float: left; height: 100%; }

#paginas .conteudo { display: block; padding: 10px; }
</style>

O menu não acompanha a altura da pagina/conteudo. Alguém pode me ajudar?

[Diéssica 140]

Uma solução simples:

 

HTML

<div id="principal3">
    <div id="coluna3">Coluna</div>
    <div id="conteudo3">Conteúdo</div>
</div>

CSS

#principal3 { display: table; }
#coluna3 { width: 200px; }
#conteudo3 {  width: 600px; }
#coluna3, #conteudo3 { display: table-cell; }

Reuni esse e mais dois métodos nesse Pen. Fica a seu critério ver o melhor para seu projeto. Existe também Faux Columns, uma solução que existe há muito tempo, a propósito. :)

 

:seta: Por que height 100% não funciona?