CSS: Problemas com height:auto

Por /

Resolvendo problemas de incompatibilidade com outros navegadores na utilização do atributo height setado com o valor auto.

Quando setamos o valor de auto no valor da altura de um div, este valor não é bem interpretado pelos navegadores firefox e google chrome.

Veja o código com erro:

#principal {
	height:auto;
	margin: 0px 8px 0px 0px;
	background-color:#FFFFFF
}
#left {
	width:224px;
	float:left;
	height:auto;
	display:inline;
	background-color:#ffffff;
}
#right {
	position:absolute;
	left:224px;
	width:554px;
	height:527px;
	background:#ffffff repeat;
}

O div#principal engloba os div#left e div#right. Todo o conteúdo do site é carregado no div#right.

O que acontece de errado, então?

Vou dar um exemplo do que aconteceu comigo. No site que desenvolvi, ao clicar no botão contato, um formulário era carregado dentro do div#right (via php), porém os campos de edição e os botãos não funcionavam corretamente. Dava a impressão de estarem desabilitados.

Após, vários testes em busca de solução descobri que height:auto não era interpretado corretamente por alguns navegadores.

Fui em busca da solução e encontreeeeiiiiiii…

Bastou acrescentar min-height:100% e overflow:hidden dentro div#principal.

Veja o código completo:

#principal {
	height:auto;
        min-height:100%;
	overflow:hidden;
	margin: 0px 8px 0px 0px;
	background-color:#FFFFFF
}
#left {
	width:224px;
	float:left;
	height:auto;
	display:inline;
	background-color:#ffffff;
}
#right {
	position:absolute;
	left:224px;
	width:554px;
	height:527px;
	background:#ffffff repeat;
}

32 comentários em “CSS: Problemas com height:auto”

    1. Tiago

      Gilson:

      Os códigos foram testados em diversos browsers e não apresentaram problemas.

      Agora, se você tentou adaptar ao seu site, me passa uma parte do código para verificação.

      Tiago

      Responder
  7. Fabrícia Carla

    A dica é boa. Funcionou. Estava com problema no template RY Channel para Joomla 1.6. Quando determinados módulos (não todos) eram indicados para a mesma posição (left ou right), acontecia uma sobreposição de módulos. Sua dica, mesmo não sendo diretamente sobre isso, funcionou de primeira.
    Obrigada.

    Responder
  12. Lincoln

    Parabéns…..
    Depois de muitas horas procurando achei a resposta..
    Valeu mesmo.
    Meu problema era que o fundo background não continuava até o final da página, se não informasse o heigth.

    Responder

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Rolar para cima