o css layout pergunta (sobre colunas)

Question

Eu tenho essa estrutura HTML

<div id="header">
    …
</div>
<div id="menu">
    ...
</div>
<div id="content">
    ...
</div>
<div id="footer">
    ...
</div>

E o CSS:

#header {
    height: 100px;
}

#footer {
    border: 1px solid #989898;
    padding-bottom: 0.1em;
    width: 100%;
    height: 2.2em;
    position: fixed;
    bottom: 0px;
    left: 0px;
}

#menu {
    width: 150px;
    float: left;
    ???
}

#content {
    ???
}

Cabeçalho e rodapé são ok, mas a pergunta vem de menu e conteúdo divs:

'menu' div deve preenchimento do cabeçalho ao rodapé, sem deslocamento

'conteúdo' devem mostrar de rolagem, se necessário.

O que o código CSS para eles irão torná-lo real?

Obrigado

Answer 1

Eu tentei suas respostas, mas o resultado não for satisfatório, então, finalmente, eu fiz a melhor solução para mim:

http://jsfiddle.net/cVdeT/

Answer 2

Eu tive um problema há muito tempo, espero que isto irá ajudar

HTML

<div id="wrapper">
  <div id="header">
    ...
  </div>
  <div id="menu">
    ...
  </div>
  <div id="content">
    ...
  </div>
  <div id="footer">
    ...
  </div>
</div>

CSS

#wrapper
{
  position: relative;
  ...
  ...
}

#header
{
   position: absolute;
   top: 0;
   left: 0;
   height: 100px;
}

#footer
{
   position: absolute;
   bottom: 0;
   height: XXXpx;
   display: block;
}

#menu
{
   position: absolute;
   top: 110px;
   left: 0;
   bottom: 0;
   width: 150px;
   height: 100%;
   display: block;
}

#content
{
   position: absolute;
   top: 110px;
   left: 160px;
   width: XXXpx;
   display: block;
}

Answer 3

Minha abordagem seria wrap 'menu' e 'conteúdo' em um invólucro de sua própria como este:

<div id='contentWrapper'>
    <div id="menu">
        ....
    </div>
    <div id="content">
        ....
    </div>
</div>

Estilo parecido com este:

    #contentWrapper {
        width: 1000px;
        overflow: hidden;
        background-color: yellow;
    }

    #menu {
        width: 150px;
        float: left;
        background-color: transparent;
    }

    #content {
        width: 850px;
        float: left;
        background-color: white;
    }

As cores estão lá para ilustrar.Na verdade, o menu é ainda a mesma altura, como sempre foi, e vai esticar em torno de tudo o que você colocar nele, mas ele sempre vai aparecer para assumir a altura total do 'conteúdo' porque você pode ver através dele, e se a sua cor de fundo do invólucro - que se estende em torno de ambos menu e conteúdo.

Answer 4

tente isso

#menu { width: 150px; height: 100%; overflow-y: auto; display: block; }