DIV - Problema com heigh(%) e height(px)

[reredias 0]

Estou criando um layout com 2 rows usando DIV no html:

 

CODE

<div id="main-body"></div>

<div id="footer"></div>

 

O "footer" tem 58px de altura.

O "main-body" ocupa 100% da altura restante da área (pelo menos era pra ser assim...)

 

CODE

#main-body {

float:left;

width:100%;

height:100%;

}

#footer {

float:left;

width:100%;

height:58px;

}

 

O que estou fazendo errado?

[inforsis 1]

reredias, Bom Dia!

Poderia ser mais espcifico, até onde posso observar o que você esta fazendo de errado é:

 

float:left; - Porque declarar essa propriedade com esse valor? Já que as div´s possuem 100% de largfura e pelo que entendi as mesmas devem ficar uma abaixo da outra.

 

Porém você poderia especificar o erro que você notou., esta sendo mostrado de maneira coprreta no IE e no FF não ou vice versa.

 

Bom, vamos tentar assim no seu css:

* {height:100%;}

#main-body {
width:100%;
background:#FF0000;
display:table-inline;
}
#footer {
width:100%;
height:58px;
background:#000;
}

Veja se isso te ajuda, caso tenha dúvida na propriedade display com o valor table-inline, use a busca do fórum, pode encontrar alguma informação adicional... caso não encontre poste que o pessoal irá te orientar melhor. http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Até Mais.

[reredias 0]

Valeu Inforsis, mas na sua solução, o "height 100%" passa da altura da área visível do navegador (tanto no IE quanto no FF).

 

Eu preciso de uma solução onde a altura justifique na área visível, não deixando surgir a barra de rolagem.

[reredias 0]

Vou tentar explicar a solução que eu procuro:

 

Layout com 3 DIVs (um debaixo do outro) formando uma tableless 1x3 centralizada.

 

A DIV do cabeçalho precisa ter (776 x 74) pixels, colada no teto da página (margin-top:0px)

 

A DIV do rodapé precisa ter (776 x 54) pixels, colada no chão da página (margin-bottom:0px)

 

A DIV do meio preenche o espaço restante, sem ultrapassar os 100% da área visível (não pode aparecer barra de rolagem) e sempre que o visitante redimencionar a janela do browser, apenas a DIV do meio estica ou encolhe.

 

Bom, eu acho que agora não tem dúvida do que eu preciso.

 

Abração!

[brcontainer 16]

reredias evite POSTES duplos é só editar o seu anterior

 

vou tentar lhe ajudar, nesses casos seria necessario usar totalmente PORCENTAGEM

ficaria assim:

html,body{
margin:0;
padding:0;
height:100%;
}

#main-body {
width:100%;
height:80%;
overflow:auto;/*só ponha isso caso você não queira que o conteudo do DIV não faça o layout sair da area visivel*/
}
#footer {
width:100%;
height:20%;
background:#000;
}

acaso você queira o FOOTER e o CABEÇARIO com valor de PIXELS mesmo, de uma lida nisso:

http://forum.imasters.com.br/index.php?showtopic=264130

 

falow