Para alguns layouts, uma função CSS pouco conhecida chamada calc()pode ser bastante útil. O Calc permite realizar quatro operações matemáticas básicas ( + – * / ) usando qualquer combinação de unidades css.
Também é fácil de usar:
#element {
width: calc(100% - 50px);
}Isso é particularmente eficaz quando você deseja compensar um elemento de largura dinâmica pela largura fixa de um vizinho.
Por exemplo, imagine que você tem algo assim:
/¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯
| /¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯ |
| | | |
| | textarea | |
| | | |
| ____________________/ |
| |
| /¯¯¯¯¯¯¯¯¯¯¯¯¯ |
| label: | input | |
| _____________/ |
________________________/E você gostaria que fosse responsivo, assim:
/¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯
| /¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯ |
| | | |
| | textarea | |
| | | |
| _________________________________________________/ |
| |
| /¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯ |
| label: | input | |
| __________________________________________/ |
_____________________________________________________/Usando CSS, você pode conseguir isso com o mínimo de esforço. Dê a uma largura fixa (digamos ) e, em seguida, defina a largura do elemento como .calc()label90pxinputcalc(100% - 90px)
<a href=” http://jim.greenle.af/examples/css-calc “target=”_blank”> Veja o Calc em ação </a>
É importante notar que ainda não está totalmente padronizado, então até lá você deve usar as versões prefixadas.calc()
#element {
width: -webkit-calc(100% - 3em);
width: -moz-calc(100% - 3em);
width: calc(100% - 3em);
}Também é importante observar que ele não funcionará no Opera, Android ou Blackberry. Ele funciona no IE9, mas não no IE8. Portanto, certifique-se de fornecer substitutos adequados! Consulte a <a href=” http://caniuse.com/#feat=calc “target=”_blank”> tabela de compatibilidade </a> completa para obter mais informações.
Que outros truques você pode fazer ?calc()