CSS: Problemas com height:auto

Publicado em: 25 de janeiro de 2010Categoria: CSSTag(s): , , ,
    Obrigado! você é a 4.524ª pessoa que visita este post.

    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;
}

    Related posts:

    1. CSS: Problemas de alinhamento (bug)
    2. CSS: Problemas de espaços entre itens de lista
    3. CSS: Galeria de Fotos
    4. JavaScript: Manipulando propriedades do CSS
    5. Criando um site: Dimensões (parte 2)