Tableless - Desenvolvimento inteligente com Padrões Web

28/09/2006
Artigos

Coisas úteis que não funcionam no IE #2 – Altura e Largura mínima e máxima

Existe quatro propriedades interessantes no CSS que nos permitem definir uma largura e uma altura mínima e máxima para os elementos. Essas propriedades são: min-width, max-width, min-height e max-height. Vamos supor que você faça um site fluído, mas que se …

Por

Existe quatro propriedades interessantes no CSS que nos permitem definir uma largura e uma altura mínima e máxima para os elementos. Essas propriedades são: min-width, max-width, min-height e max-height.

Vamos supor que você faça um site fluído, mas que se o usuário estiver usando uma resolução muito grande, o layout não vá até o final da janela, para não deixar o layout tão feio. Tipo, se o layout ficasse bom até a resolução de 1152, mas não ficasse tão bom numa resolução de 1280. Mas que se o usuário redimensionasse a janela ou usasse uma resolução menor, o layout também se adequaria perfeitamente.

Logo, para o layout manter sua aparência, seria perfeito se você pudesse definir uma largura máxima cujo o layout não passaria. Para tanto, você usa a propriedade max-width. O valor da propriedade seria a largura máxima que você gostaria que o layout chegasse.

1
div#geral {max-width: 1150px;}

O mesmo método de utilização é aplicado para as outras propriedades.

Infelizmente, essas propriedades – que salvariam nossa vida – não funcionam no Internet Explorer. E quem sabe se via funcionar nos próximos IEs. Aguardemos.

Leia também o primeiro artigo da série: Coisas úties que não funcionam no IE #1 – Seletor Inteligente

Por Diego Eis

Diego Eis criou o Tableless para disseminar os padrões web no Brasil. Como consultor já treinou equipes de empresas como Nokia, Globo.com, Yahoo! e iG. É palestrante e empreendedor.

http://twitter.com/diegoeis/

Veja os outros posts de

  • http://www.ferrari.eti.br Carlos André Ferrari

    Isso realmente iria permitir fazer coisas muito boas, mas o IE é o IE, e infelizmente não podemos fazer nada, a não ser esperar que um dia o FF e Opera virem o jogo ou o Tio Bil de uma ajuda.

    []‘s

  • Renata Teixeira

    O único comentário que posso fazer é:
    “ahhh, que falta que o IE não me faz…”

  • http://elmicox.blogspot.com Micox

    Uma solução já conhecida na net para quem deseja ‘driblar’ a falta disto no IE, é combinando hacks (ou comentários condicionais) com a função expression() que o IE aceita dentro de CSS:

    Exemplo:
    Para os navegadores padrão:
    max-height:200px;

    Para os IE:
    height: expression(this.scrollHeight > 200 ? “200px” : “auto”);

    Espero ter ajudado. Qualquer coisa corrijam aí. :-)

  • http://www.thiagomachado.com thiago machado

    uma saida para este min-width que eu uso é uma expressão regular eheh

    salvam a vida.

  • http://www.sahkitty.vze.com Sandra

    Também não funciona no IE7?

  • Daniel Luz

    Realmente são muito úteis… e felizmente o IE7 tem suporte a elas!

  • http://www.ferrari.eti.br Carlos André Ferrari

    Nem testei o IE7 ainda, mas essa notícia do suporte agrada muito ^^

  • http://www.eugeniogrigolon.com/ Eugenio Grigolon

    Faltou no post o hack que o Micox passou.

    Bom comentário Micox.

  • http://www.southbmx.com.br Maicon Junches

    boa.

  • http://www.antenando.com.br Rael

    é… ja tentei usar isso a um tempo atras…. ia facilitar um pouco minha vida, mas percebi que nao adiantou :-/

    o ie é um atraso em nossa vida… :-(

  • Rafael Baialuna

    IE é IE.. o que podemos fazer???

    Pensando em nós? (desenvolvedores) já fizemos: Browsers de verdade (FF, Opera, etc)…

    Nossos clientes??? Só podemos sentar e chorar.. rsrs a maioria usa essa coisinha chamado IE!

  • http://www.mauriciorech.com.br/ Maurício Rech

    no IE7 funciona, ou é impressão minha…
    vou testar aki novamente!

  • http://project47.viscountbox.com Carlos Eduardo

    Ainda bem que há o pessoal que “desenvolve” hacks para contornar tais problemas…

  • http://tsassara.wordpress.com Tarcísio Sassara

    Nunca tive que usar as propriedades referentes a largura, mas quanto a altura já, e tive essa péssima experiência.
    O típico caso da coluna da esquerda não ter um tamanho proporcional ao da direita.
    Descobri a solução no alistapart.com.

  • Jorge Paulo

    O mundo seria bem melhor se não existissem advogados e o IE

    Isso é utopia =D

  • Thiago Prado

    O IE já e pessimo para manipular o tamanho das divs por width e height, observe que no firefox e no opera os tamanhos são totalmente diferentes.
    Se este comando realmente funciona-se no IE não seria necessário a utilização tão acentuada do CSS “clear:both;” para conseguir trabalhar com paineis flutuantes.
    Gostária de um pouco mais de informações sobre suporte do IE7 para o CSS, se finalmente poderemos trabalhar sem ter de ficar criando mil e um hacks for IE6

  • Maicon dos Santos

    TOMARA QUE FUNCIONE NO IE7!!!!!!!

  • http://dgmike.wordpress.com Michael

    ElMicox, conde consigo referencias sobre tal expressão?

  • http://vdepizzol.wordpress.com Vinicius Scopel Depizzol

    Qual a vantagem de o IE7 suportar se ele só vai ser liberado para windows originais???

    –
    Rediscover the web.

  • http://juliogreff.wordpress.com Júlio Greff

    Caramba! Estou ferrado! Meu site vai sair uma desgraça em resoluções grandes! Ótima dica, principalmente pra quem tem monitor antigo (que nem eu) e não consegue testar em resoluções maiores.

  • http://www.bryntec.com Brynner Ferreira

    Eis a solução, porém não definitiva, pois a mesma não funciona para Internet Explorer 5.0 para Mac, porém a versão 6.0 do IE para Windows funciona perfeitamente. Funcionou também nos seguintes browsers para Mac: Camino, Firefox, Safari, Netscape. Em windows funcionou também no Firefox.

    pagina.htm
    dados…

    arquivo.css
    /* outros navegadores */
    #conteudo {
    width:450px; /* largura do div */
    padding:0px;
    min-height:445px; /* altura mínima */
    height:auto;
    }
    /* para Internet Explorer */
    /*\*/
    * html #conteudo {
    height:455px; /* altura pré-definida com 10 pixels a mais */
    }
    /**/

    Comentem sobre o código acima.

  • http://www.aresistencia.net/ Erick

    eu estava lendo alguns materiais e descobri que o “max” e o “min”, tanto “width” quanto “height” funcionam SOMENTE e PERFEITAMENTE para tags imagem!!!

    experimentem ;)

    []‘s!

  • http://www.inova.unicamp.br caio

    Ola!! no 7 ja funciona! mas no 6 nao!
    estava testando td feliz, meu site redimensionavel, porem nao ate o fim em altas resolucoes, quando vi q no 6.0 nao estava funcinando!
    vi acima 2 solucoes mas nenhuma dela funcionou no meu caso, q se trata do max width

    div#tudo { /* fica sobre toda página*/
    border-left:7px solid #cccccc;
    border-right:7px solid #cccccc;
    background-color:#ff00ff;
    margin: 0px 0px auto;
    min-width:760px;
    max-width:900px;
    }

    assim n consigo limitar o tamanho maximo e as bordas q eu criei acabam indo ate o fim!
    como posso solucionar no 6?
    valeu mto grato!
    pena q ainda existem pessoas q usam ie6.0

  • http://www.incuca.com.br Luis

    Pessoal,

    Para o IE, existe a possibilidade de usar as tags _height e _width, que funcionam exatamente como o min_height e min_width.

    Exemplo:

    #box {min-width:100px;_width:100px;min-height:200px;_height:200px}

  • estenio

    tentei tudo quanto é coisa que achei na internet para fazer uma DIV com min-width inclusive a que o colega colocou ai e nenhuma funciona a unica coisa que não tentei foi fazer if de ie só que não faço isso por que quero os codigos tudo junto alias é bem engraçado pois todos os métodos que achei de min-height funcionam no ie6 é por isso que eu digo o ie6 tinha que ser abolido but nós ja sabemos por que ele não acaba ne……
    só tenho a lamentar hehehe!!!

  • http://www.ceti.com.br Sérgio Bolonha

    Depois de dias tentando acertar um site com min-width e min-height no IE, vi a dica do Luis, que realmente funciona.

    Como não consegui anteriormente, acabei colocando largura fixa, mas o problema continuou no height. O tal do _height funciomou 100%.

    Valeu a dica!