0

Eu quero criar uma página HTML com uma <div> que possui uma altura fixa de 450px para guardar textos e outros elementos. Para fazer isso, eu criei uma classe com as seguintes propriedades em CSS.

.minhaClasse{
    height: 450px;
    max-height: 450px;
}

O problema é que a propriedade max-height não funciona quando eu adiciono padding para o elemento. Em algumas páginas HTML, eu preciso adicionar um padding-top no elemento para descer o texto na página.

Veja o exemplo abaixo:

.minhaClasse{
    height: 450px;
    max-height: 450px;
}
<body align="center">
    <div class="minhaClasse" style="padding-top: 100px;">
        Meu texto dentro da DIV 100px abaixo <br>
        (gostaria que a div permanecesse com 450px de altura)
    </div>
</body>

Como podem ver, o tamanho da <div> ultrapassa os limite de altura do elemento. O que eu quero saber é, como posso limitar a altura do meu elemento, mesmo adicionando um padding a ele ?

2
  • Se tem height: 450px; não precisa de max-height: 450px;, a não ser que esteja usando algum meio de diplay diferente de block, o que parece improvavel.
    – Syzoth
    11/04/2020 às 21:48
  • Por que usar/não usar * box-sizing? pt.stackoverflow.com/questions/100623/…
    – hugocsl
    11/04/2020 às 22:58

1 Resposta 1

1

Se tem height: 450px; não precisa de max-height: 450px;, a não ser que esteja usando algum meio de diplay diferente de block, o que parece improvável para o seu caso, para resolver bastaria usar box-sizing: border-box; ou com retrocompatibilidade:

-webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
        box-sizing: border-box;

A propriedade box-sizing por padrão usa o valor content-box, cada valor tem um comportamento do box-model, que vão se comportar de maneira diferente conforme padding, border, margin e o próprio conteúdo

box-sizing: content-box

Esse é o valor padrão da propriedade, faz com que o elemento tenha a altura ajustada pelo width (largura) e height (altura) e conteudo incluidos (limitados) nas medidas, mas não "limita" o padding, border e margin

Por exemplo se um elemento tem height: 300px; e adiciona um padding-bottom: 50px; a altura vai ser height: 300px;

Se só tiver a altura e o padding for zero, mas o conteúdo passar de 300px o elemento ainda vai ter 300px, o conteúdo só vai "vazar para fora" do box-model, pois passou do limite.

box-sizing: padding-box

As propriedades de largura (width), altura (height) e padding incluem (limitam-se) ao box-model, mas não serão incluídos border ou margin.

box-sizing: border-box

As propriedades de largura (width) e de altura (height) padding e border incluem (limitam-se), mas não será incluído a propriedade margin.

2
  • O que faz o box-sizing ? 11/04/2020 às 21:51
  • @JeanExtreme002 editei a resposta.
    – Syzoth
    11/04/2020 às 22:03

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .