Min Max Height Width

A propriedade min-height, max-height, min-width e max-width não é tão conhecida e usada, porém em muitos casos é bem útil e até mesmo necessária.
Imagine que você precise que uma determinada DIV aumente sua altura (heigth) automaticamente quando o conteúdo da mesma vai aumentando, a DIV deve aumentar junto com o conteúdo empurrando o resto dos componentes do site junto com o aumento dela. Até aí tudo bem, porém você quer que a DIV já comece com uma altura fixa, e seu conteúdo inicial não alcança essa largura, para isso você define um height como no exemplo abaixo, usando essas configurações do CSS...


border:1px #FF0000 dashed;
color:#F00;
height:100px; /* altura */
width:200px; /* largura */

A DIV ficara assim...

Conteúdo da DIV com height definido

Como o conteúdo contido nela não ultrapassa sua altura e largura ela fica do jeito que você gostaria, mas caso o conteúdo aumente dinamicamente que na maioria dos sistemas acontecem, veja o que aconteceria...

O conteúdo da DIV aumentara automaticamente conforme o seu conteúdo seja manipulado dinamicamente por algum usuário ou base de dados, acontecendo que o seu conteúdo passe o limite da DIV e pode até quebrar seu layout...

Como você definiu um tamanho fixo ela não vai aumentar conforme o conteúdo dela aumenta, então como poderemos fazer com que ela acompanhe seu conteúdo mesmo definindo o seu tamanho inicial para não quebrar o layout?

Claro que você pode até conseguir fazer isso usando DIVs umas dentro das outras com a ajuda do float, mas é bem mais complicado assim e pode não dar o resultado esperado, para isso foi feito essa propriedade CSS que acho bem útil que é MIN e MAX

Veja como ficaria essa mesma DIV com o min-height no lugar do heigth, obtendo pouco conteúdo...


border:1px #FF0000 dashed;
color:#F00;
min-height:100px; /* altura minima */
width:200px; /* largura */
Conteúdo da DIV com min-height definido

Aparentemente não mudou nada não é mesmo? Mas e se o conteúdo dela aumentar dinamicamente, o que aconteceria?

O conteúdo da DIV aumentara automaticamente conforme o seu conteúdo seja manipulado dinamicamente por algum usuário ou base de dados, caso seu conteúdo passe o limite da DIV, ela aumentara junto com o conteudo pois foi definido uma altura mínima (min-height), e como não foi definido um max-height ela aumentara até que seu conteudo acabe...

Muito bom não é mesmo? Agora você ja pode definir uma altura mínima com o min-height ou uma altura máxima usando o max-height, isso também serve com a largura (width), usando o min-width e o max-width

Essa propriedade também é muito útil para usar nas textarea dos seus form, caso você queira desabilitar que a textarea possa aumentar arrastando o seu canto inferior direito, veja mais esse exemplo de uma textarea sem definição do max-width e max-height, faça o teste arraste a textarea e perceba que você pode aumentá-la o quanto quiseres...

Veja o css sem o max-width e max-height...


border:1px #00FF00 solid
padding-bottom: 30px; /* apenas para aumentar um pouco sua area */

Agora aumente de novo o seu tamanho, porém vamos definir um max-width e max-height, segue o css...


border:1px #00FF00 solid
padding-bottom: 30px; /* apenas pra aumentar um pouco sua area */
max-width: 700px; /* largura maxima de 700px */
max-height: 100px; /* altura maxima de 100px */

Como foi definido um max-width e um max-height, você não vai poder aumentar além das suas definições. Incrível não é mesmo, depois que descobri essas propriedades consegui montar layouts com mais facilidade, sem quebrar a cabeça pensando em como arrumar aquela div que deveria ter uma tamanho fixo, mas caso o seu conteúdo aumente dinamicamente, não passe dos seus limites e não quebre todo o layout.

Publicidade

Gostou? Compartilhe com seus amigos!

Ícone Facebook Ícone Twitter Ícone Linkedin
Comentários

Comentários

Beto Beto
Seta comentário
Parabéns pelo post rapaz, me ajudou muito! Agradecido !
Responder Postado em: 25/08/2015 18:46:00
Everson da Luz Everson da Luz
Seta resposta
Opa obrigado! :D
Postado em: 25/08/2015 20:03:43
Everson Schneider Everson Schneider
Seta comentário
Muito obrigado pela dica, tava quebrando a cabeça kkkkk.
Responder Postado em: 02/10/2017 21:00:18
Comentários

Deixe um comentário

Subir Página