MIN-HEIGHT (ALTURA MÍNIMA) PARA ELEMENTOS DE BLOCO COM CSS
Postado em: 4 de junho de 2007 por Pedro RogérioUm grande problema que atormenta a vida dos desenvolvedores, quando se trabalha com elementos de bloco (divs), é definir uma altura mínima para eles. Isso ocorre quando se tem uma imagem com float e um texto correndo logo ao lado, se o texto não tem a altura da imagem, o conteúdo que está logo abaixo do texto também será mostrado ao lado da imagem, pois a div que tem o conteúdo, toma a altura do texto, ao invés de tomar automaticamente a altura da imagem. Vejam o que acontece nesse exemplo.
Para solucionar esse problema, basta selecionar uma altura mínima para o elemento que contém o texto e a imagem:
HTML
Utilize-se de uma div como container e coloque dentro uma imagem e um texto decritivo.
<div id="box">
<img src="Imagem_de_exemplo.gif" alt="Imagem de Exemplo" title="Imagem de Exemplo" />
<p>Conteúdo da div box</p>
</div>
CSS
#box {
min-height:128px;
height:auto !important;
height:128px;
padding:5px;
}
#box img {
float:left;
}
A propriedade min-height estabelece uma altura mínima para o elemento, esta propriedade não funciona no Internet Explorer, sendo que ele interpreta o atributo height como min-height, por isso estabeleci height:128px;. Agora paras os browsers que interpretam corretamente a propriedade height e min-height, não tenham uma altura fixa, por isso foi utilizado height: auto !important, estabelhecendo-lhe uma altura automática, dando-lhe uma maior prioridade a esta declaração fazendo o uso de !important, que não é interpretada pelo Internet Explorer. Agora vejam um exemplo do efeito funcionando corretamente.









Rael B. Riolino disse: 04.06.07 ás 17:27
Interessante esta técnica….
Para este caso em especial, outra coisa que resolve o caso é colocar uma div no final com clear:both…
mas em alguns outros casos que demandam uma altura mínima, o clear:both nao resolve…
valeu pela dica!
carlos disse: 05.06.07 ás 10:55
obrigado, falicitou a minha vida
Diogo disse: 05.06.07 ás 16:23
Bacana este esquema, mas estou com uma dúvida, por exemplo tenho 2 divs… ambas float:left; e largura definida, gostaria de acordo que eu aumento a div da esquerda aumenta a da direita, estou deixando como auto a altura mas não esta funcionando, tem outro modo ?
Leonardo Procópio disse: 08.06.07 ás 18:45
o ie 7 tbm não conhece o !important ?
Julio Fontoura disse: 17.06.07 ás 15:49
Cara, muito legal, excelente solução! Parabéns!
Jair Humberto disse: 09.07.07 ás 21:24
continuamos com o grande problema que nos atormenta.
essa solução não resolve quando temos duas divs, uma do lado da outra.
por exemplo eu tenho uma div geral, e duas divs internas, uma esquerda e uma direita, ambas com float:left setado, pois tenho interesse que elas permaneçam lado a lado. se eu aumentar o conteudo da esquerda de forma que ele ultrapasse o tamanho da div geral, esta não deformará,
dando um erro no layout.
e essa solução não resolve isso. portanto o grande problema continua
infelizmente. acho melhor voltarmos para as antigas tabelas, não tinha esse problema.
Camilo disse: 17.09.07 ás 17:10
Pedro, valeu… essa foi na medida do meu problema, ajudou legal.
Ewaldo disse: 05.10.07 ás 07:56
Olá.
Testei a dica, mas o que acontece aqui no ie6 é que a height da minha div ficou fixa, e não está crescendo se o conteúdo ultrapassar o valor da min-heigh.
Alguem pode me ajudar?
Abração!
Pedro Rogério disse: 05.10.07 ás 15:17
@Ewaldo,
É estranho por que acabei de testar, em 2 sites diferentes essa técnica, e funciona normal no IE 6!!!
Lucas Bueno disse: 18.10.07 ás 09:12
ôrra. Valeu a dica. Salvou.
Andre Lima disse: 25.01.08 ás 10:36
Obrigado pela dica!
Facilitou a minha vida
Romulo De Lazzari disse: 27.02.08 ás 11:50
Salvou o dia!
Muito obrigado pela dica!
Wendel Lopes disse: 26.05.08 ás 23:49
Para Jair Humberto
Este problema se resolve quando se cria uma div fictícia dentro da sua div geral, embaixo das duas div com float, com a propriedade clear: both e com a width do tamanho da sua div geral.
Aqui resolveu tranquilamente.
kakaroto disse: 30.09.08 ás 15:59
Beleza pedro
funfou certinho a dica no FF3 e no ie7 paulada power
vlw pela dica