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; } |
Realmente funcional. Parabens pelo post. Preciso e objetivo. Funciona perfeitamente.
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?
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
Parabéns pelo post, pessoas como vc fazem a diferença.
Rodério
Obrigada!
Vc resolveu meu problema.
Obrigado, solução simples e eficiente.
Obrigado. Vc solucionou um grande problema q estava tendo.
Parabéns.
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.
Seu comentário será válido para quem ler este post.
Obrigado.
Cara, muito boa a dica, estava precisando dessas propriedades de css nesse momento. Grato!
Funcionou perfeitamente pra mim aqui… 🙂
valeu mesmo!!!
Salvou minha pele. Vlw
Funcionou perfeitamente aqui! Resolveu meu problema! 😀
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.
Rapaz, ótima dica!
Resolveu meu problema!!
Parabéns!
Agradecemos por ter compartilhado!
Sucesso!
Valeu pela dica amigo… funcionou blz…
Abss
Veleu mesmo. Estava quebrando a cabeça com isso ha mt tempo.
Salvou a minha pele².
flws
show de bola, a tempo venho a procura…. vlw…
Ajudou bastante!
valeu funcionou porreta
irmão show de bola ,tava quebrando cabeça , brigadoooooo
2 anos e este post é atual e utilissimo!
Muito obrigado, me ajudou a resolver um problemão! hahahaha
cara realmentee funcionaa parabens mano muito obrigadoo
Muito bom deu certim
Nossa! Muito obrigado, realmente era esse o bug!
Abraços
dica muito boa tudo que estava precisando aki vlw por compartilhar
Te amo!
Acredito que esta mensagem foi enviada, porque ajudei vc a resolver seu poblema…rsss
Você salvou minha pele, muito obrigado. =D
Show de bola, resolveu meu problema tambem!
Apanhei muito até ler esta tua página. Agora resolvi o meu problema.
Meus parabéns… VALEUUUUUUUUUUUUU mesmo.