CSS: Problemas com height:auto

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

31 comentários em “CSS: Problemas com height:auto

  • 16 de dezembro de 2010 em 17:48
    Permalink

    Boa tarde!

    Efetuei testes no Firefox 3.6 e Internet Explorer 8 e 9, só obtive sucesso no Firefox.

    Existe algo que eu faça para resolver?

    Resposta
    • 16 de dezembro de 2010 em 18:40
      Permalink

      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

      Resposta
  • 26 de dezembro de 2010 em 2:43
    Permalink

    Parabéns pelo post, pessoas como vc fazem a diferença.

    Rodério

    Resposta
  • 17 de junho de 2011 em 15:58
    Permalink

    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.

    Resposta
    • 17 de junho de 2011 em 16:02
      Permalink

      Seu comentário será válido para quem ler este post.

      Obrigado.

      Resposta
  • 22 de junho de 2011 em 16:14
    Permalink

    Cara, muito boa a dica, estava precisando dessas propriedades de css nesse momento. Grato!

    Resposta
  • 30 de agosto de 2011 em 13:35
    Permalink

    Funcionou perfeitamente pra mim aqui… 🙂

    valeu mesmo!!!

    Resposta
  • 6 de setembro de 2011 em 10:21
    Permalink

    Salvou minha pele. Vlw

    Resposta
  • 15 de setembro de 2011 em 14:32
    Permalink

    Funcionou perfeitamente aqui! Resolveu meu problema! 😀

    Resposta
  • 4 de outubro de 2011 em 18:37
    Permalink

    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.

    Resposta
  • 22 de novembro de 2011 em 11:49
    Permalink

    Rapaz, ótima dica!

    Resolveu meu problema!!

    Parabéns!

    Agradecemos por ter compartilhado!

    Sucesso!

    Resposta
  • 24 de novembro de 2011 em 9:16
    Permalink

    Valeu pela dica amigo… funcionou blz…

    Abss

    Resposta
  • 20 de dezembro de 2011 em 18:39
    Permalink

    Veleu mesmo. Estava quebrando a cabeça com isso ha mt tempo.

    Resposta
  • 6 de abril de 2012 em 18:29
    Permalink

    show de bola, a tempo venho a procura…. vlw…

    Resposta
  • 20 de setembro de 2012 em 15:46
    Permalink

    valeu funcionou porreta

    Resposta
  • 5 de outubro de 2012 em 13:22
    Permalink

    irmão show de bola ,tava quebrando cabeça , brigadoooooo

    Resposta
  • 14 de novembro de 2012 em 10:19
    Permalink

    2 anos e este post é atual e utilissimo!
    Muito obrigado, me ajudou a resolver um problemão! hahahaha

    Resposta
  • 3 de fevereiro de 2015 em 17:02
    Permalink

    Nossa! Muito obrigado, realmente era esse o bug!

    Abraços

    Resposta
  • 23 de junho de 2015 em 14:45
    Permalink

    dica muito boa tudo que estava precisando aki vlw por compartilhar

    Resposta
    • 12 de novembro de 2015 em 20:42
      Permalink

      Acredito que esta mensagem foi enviada, porque ajudei vc a resolver seu poblema…rsss

      Resposta
  • 11 de outubro de 2016 em 13:24
    Permalink

    Você salvou minha pele, muito obrigado. =D

    Resposta

Deixe uma resposta

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