Com a chegada do CSS3, diversas gambiarras que tínhamos que fazer para resolver problemas simples não são mais necessárias. Uma das novidades que ganhamos é a função calc(). Segundo a especificação da W3C:
The calc() function allows mathematical expressions with addition (‘+’), subtraction (‘-’), multiplication (‘*’), and division (‘/’) to be used as component values. The ‘calc()’ expression represents the result of the mathematical calculation it contains, using standard operator precedence rules. It can be used wherever <length>, <frequency>, <angle>, <time>, <number>, or <integer> values are allowed. Components of a ‘calc()’ expression can be literal values, ‘attr()’ or ‘calc()’ expressions, or <percentage> values that resolve to one of the preceding types.
O função calc () permite expressões matemáticas, como adição (‘+’), subtração (‘-‘), multiplicação (‘*’), e divisão (‘/’) que são utilizados como valores de componentes. A expressão ‘calc ()’ representa o resultado do cálculo matemático que contém, utilizando as regras de operação padrão de precedência. Ele pode ser usado sempre que <length>, <frequency>, <angle>, <time>, <number> ou <integer> são permitidos. Componentes de uma expressão “calc () ‘podem ser valores literais,” attr () “ou” calc ()’ expressões ou valores <porcentagem> que resolver para um dos tipos anteriores.
Essa função permite, ainda, que sejam utilizadas diferentes unidades de medidas para o definir os valores dos elementos, como px, em, %, etc…
Vamos começar definindo o estilo dos nossos elementos article:
article {
border: 1px solid #333;
height: 80px;
margin: auto;
width: 800px;
}
No nosso primeiro exemplo temos um elemento article com 3 section que dividirão o espaço igualmente entre si.
O HTML:
<article id="um">
<section class="um-um">Um Um</section>
<section class="um-dois">Um Dois</section>
<section class="um-tres">Um Três</section>
</article>
O CSS:
#um section {
float:left;
height: 80px;
width: calc(100% / 3);
width: -webkit-calc(100% / 3);
width: -moz-calc(100% / 3);
}
.um-um { background: #555; }
.um-dois { background: #999; }
.um-tres { background: #ccc; }
Você pode me dizer: “Mas é só colocar as section com 33% de width que resolve.”. Aí eu te pergunto: “Onde fica o 1% que sobra?”.
Bom, reconheço que não fui muito feliz na escolha do primeiro exemplo, mas agora você vai ver o que realmente importa. Vou mudar o seu mundo (tá exagerei).
O HTML:
<article id="dois">
<section class="dois-um">Dois Um</section>
<section class="dois-dois">Dois Dois</section>
</article>
O CSS:
#dois section {
float:left;
height: calc(100% - 40px);
height: -webkit-calc(100% - 40px);
height: -moz-calc(100% - 40px);
width: calc(100% / 2 - 40px);
width: -webkit-calc(100% / 2 - 40px);
width: -moz-calc(100% / 2 - 40px);
}
.dois-um {
background: #ccc;
padding: 20px;
}
.dois-dois {
background: #999;
margin: 20px;
}
Quando você adiciona o atributo padding/margin em um elemento, os valores desse atributo são somados ao tamanho do elemento. Neste caso, cada um dos elementos section ficaria com 50% (100$ / 2) do tamanho total do elemento article (400px) mais os 40px de padding/margin em cada lado do elemento. Assim os 2 elementos section ficarão um abaixo do outro, pois os 2 elementos terão 440px de largura total, enquanto o article tem apenas 800px de largura.
Com o CSS 2.1 não teríamos como corrigir isso. Com a função calc() basta diminuirmos o tamanho do padding/margin do tamanho do elemento.
No exemplo publicado você pode ver o funcionamento da função calc() e se quiser baixar o código fique a vontade.
Teste, modifique, questione, critique. Use o campo de comentários para sanar dúvidas. Mas atenção, essa função ainda é uma candidata a recomendação da W3C. Para utilizá-la são necessários os prefixos proprietários (somente Chrome e Firefox suportam atualmente).
Fonte: