Lay-out líquido

[Guga01 0]

Boa tarde pessoal!

 

Estou precisando de ajuda com css. Tenho duas colunas que devem preencher 100% da tela, independente da resolução e, se auto-ajustar caso o usuário modifique o tamanho da janela.

 

O código que tenho é:

CSS:

*
{
padding:0;
margin:0;
border:0;
}

html, body
{
margin:0;
padding:0;
text-align:center; /* hack para o Internet Explorer */
height:100%;
}

#colEsq
{
float:left;
width:270px;
height:100%;
background:url(../images/site/fundoColEsq.jpg) top left repeat-y;
}

#colDir
{
margin-left:270px;
height:100%;
background:#FFF;
}

 

A idéia é que a coluna da esquerda fique em 270px de largura e a da direita preencha o restante. Num primeiro momento isso funciona, mas acontece que nesta coluna da esquerda tenho um menu com accordion e, quando o menu é aberto e ultrapassa a área da janela, a imagem de fundo da coluna da esquerda não acompanha. O que devo fazer para corrigir este problema? Obrigado.

[Diéssica 140]

Tenta assim na formatação do elemento então:

overflow:hidden;

:seta: http://www.w3schools.com/cssref/pr_pos_overflow.asp

[Guga01 0]

Olá Diéssica!

 

Fiz uma alteração, mas acho que ainda não resolve totalmente, pois a janela do navegador fica sem barra de scroll e daí fica impossível de visualizar conteúdo que ultrapasse o 100% da janela.

 

O que fiz foi:

html, body
{
margin:0;
padding:0;
text-align:center; /* hack para o Internet Explorer */
height:100%;
min-height:100%;
overflow:hidden;
}

#colEsq
{
float:left;
width:270px;
height:100%;
min-height:100%;
padding-bottom:32767px;
margin-bottom:-32767px;
background:url(../images/site/fundoColEsq.jpg) top left repeat-y;
}

#colDir
{
margin-left:270px;
height:100%;
min-height:100%;
padding-bottom:32767px;
margin-bottom:-32767px;
background:#FFF;
}

 

 

 

 

Tenta assim na formatação do elemento então:

overflow:hidden;

:seta: http://www.w3schools.com/cssref/pr_pos_overflow.asp

[Diéssica 140]

Adiciona o overflow no elemento que não tá expandindo