calc-funktio

calc-funktio mahdollistaa CSS-ominaisuuksien arvojen laskennan. Funktio ottaa parametrinaan matemaattisen lausekkeen, jonka laskentatulosta voidaan käyttää CSS-ominaisuuden arvona. Lauseke voi sisältää operaattorit +, -, *, /.

Syntaksi

cssvalitsija {
  ominaisuus: calc(lauseke);
}

Esimerkki

Tehdään niin, että lohkon leveys on yhtä suuri kuin 100% vanhemman leveydestä, miinus 50px:

html<div id="parent">
  <div id="child"></div>
</div>

css#child {
  width: calc(100% - 50px);
  height: 100px;
  margin: 0 auto;
  border: 1px solid red;
}
#parent {
  border: 1px solid green;
}

Результат:

Katso myös