1. Főoldal
  2. Cikkek
  3. Dev
  4. Számolás CSS-ben? Lehetséges!

Számolás CSS-ben? Lehetséges!

Dev

A minap egy új projekten kezdtem dolgozni, ahol ismét felmerült egy probléma, amire már rég keresem a megoldást. Egy webdesignt kell készítenem, ahol jobb oldalt egy fix oldalsáv van. No most ilyenkor felmerül a kérdés, hogy mekkora kell legyen az oldal tartalmi része? (a bal oldalt levő rész, ahova majd maga az oldal jön).

Egy kis logikával JavaScript segítségével megoldható a dolog. Gondoltam, hogy kell lennie egy egyszerűbb megoldásnak is, minek telenyomni egy oldal JS scriptekkel? Van egyszerűbb megoldás.. annyira egyszerű, hogy ennél könnyebb már nem is lehetne! Bemutatom nektek a CSS calc() funkciót! A lényeg az, hogy a zárójelen belül az alapvető matematikai műveleteket el tudjuk végezni. Vegyük példának a fent említett weboldalt. Jobbról van egy ilyen elemünk:

aside.oldalsav {
    position: fixed;
    top: 0;
    right: 0;
    width: 400px;
    height: 100%;
    background: #242424;
}


Ezután bal oldalra jön majd a tartalmi rész:

section.tartalom {
    width: ?;
    height: auto;
    background: #E4E4E4;
}

Szélesség: ?.... Itt jön a képbe a calc() funkció. Az oldalsáv szélessége 400 képpont, az egész oldal pedig a 100%. Kivonni gondolom mindenki tud, így csak annyi a dolgunk, hogy:

section.tartalom {
    width: calc(100% - 400px);
    height: auto;
    background: #E4E4E4;
}

Remélem hasznos funkciót mutattam be ma nektek, használjátok egészséggel! Egy kis segítség a böngésző kompatibilitáshoz: ITT :)

kovjonas profilképe
Kovács Jónás @kovjonas +86 Hobbi web-designer, kezdő 3D modellező, LEGO őrült.
3 hozzászólás
Hozzászóláshoz jelentkezz be vagy Regisztrálj!
http://caniuse.com/#feat=calc
2015.04.10 12:14
Wow, nem is tudtam, hogy van ilyen a natúr CSS-ben :D
2015.04.10 11:26
Tegnapig én sem, de nagyon hasznos :D
2015.04.10 11:30