Ir para conteúdo / Skip to content

MIN-HEIGHT (ALTURA MÍNIMA) PARA ELEMENTOS DE BLOCO COM CSS

Postado em: 4 de junho de 2007 por Pedro Rogério

Um 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.

Se tiver um tempo, leiam também:

Deixe seu comentário

14 comentários para esse post

  1. Rael B. Riolino disse: 04.06.07 ás 17:27
    #1

    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! :)

  2. carlos disse: 05.06.07 ás 10:55
    #2

    obrigado, falicitou a minha vida

  3. Diogo disse: 05.06.07 ás 16:23
    #3

    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 ?

  4. Leonardo Procópio disse: 08.06.07 ás 18:45
    #4

    o ie 7 tbm não conhece o !important ?

  5. Julio Fontoura disse: 17.06.07 ás 15:49
    #5

    Cara, muito legal, excelente solução! Parabéns!

  6. Jair Humberto disse: 09.07.07 ás 21:24
    #6

    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.

  7. Camilo disse: 17.09.07 ás 17:10
    #7

    Pedro, valeu… essa foi na medida do meu problema, ajudou legal.

  8. Ewaldo disse: 05.10.07 ás 07:56
    #8

    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!

  9. Pedro Rogério disse: 05.10.07 ás 15:17
    #9

    @Ewaldo,

    É estranho por que acabei de testar, em 2 sites diferentes essa técnica, e funciona normal no IE 6!!!

  10. Lucas Bueno disse: 18.10.07 ás 09:12
    #10

    ôrra. Valeu a dica. Salvou.

  11. Andre Lima disse: 25.01.08 ás 10:36
    #11

    Obrigado pela dica!
    Facilitou a minha vida ;)

  12. Romulo De Lazzari disse: 27.02.08 ás 11:50
    #12

    Salvou o dia!

    Muito obrigado pela dica!

  13. Wendel Lopes disse: 26.05.08 ás 23:49
    #13

    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.

  14. kakaroto disse: 30.09.08 ás 15:59
    #14

    Beleza pedro

    funfou certinho a dica no FF3 e no ie7 paulada power

    vlw pela dica

Deixe seu comentário