Porcentagem menos pixels com CSS calc

106d atrás

Ion

---

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);
}

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);
}