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 :)