Porcentagem menos pixels com CSS calc

26d atrás

0 0

Com #CSS é possível definir medidas utilizando cálculos matemáticos. A seguir, vamos explicar como calcular largura e altura usando a função calc() do CSS.

Inclua no HTML o seguinte elemento, que será estilizado:

<div class="rect"></div>

Definindo largura

.rect {
    width: calc(100% - 32px);
}
Aqui estamos fazendo um cálculo que vai definir a largura do elemento. Nesse caso, ele vai ocupar 100% da tela menos 32px.

Definindo altura

Da mesma forma é possível definir a altura. Vamos utilizar a unidade vh, 1 vh representa 1/100 do tamanho da altura da janela do browser.

.rect {
    height: calc(50vh - 64px);
}
Nesse caso, a altura será de metade da altura do browser (50vh) menos 64px.


Comentários (0)

0/512
Link