Czy istnieje sposób dodawania i odejmowania wartości w CSS?

Question

Mam element div, który pozycjonuję z ujemnym marginesem, ale chciałbym, aby rozciągnął się aż do dna pojemnika div, więc mogę użyć obramowania, które nie kończy się losowo. Jeśli spojrzysz na http://kineticaid.com/k/home.php, zrozumiesz, o co mi chodzi. Nie mogę po prostu powiększyć jego wysokości w pikselach, ponieważ wysokość div kontenera zmienia się dynamicznie wraz ze stronami. Co chcę zrobić, to coś takiego:

#rightcol { 
float: right; 
width: 225px; 

height: 100% + 250px; 

margin: -325px -25px 0 0; 
} 

Zasadniczo pytam, czy możesz dodawać i odejmować w CSS. Dzięki!

Answer 1

Sass i mniej mają podobne funkcje, które są potrzebne, ale myślę, że to, o co pytasz, trzeba zrobić z javascript lub jquery, aby wykonać obliczenia.

http://api.jquery.com/height/

Answer 2

Rozwiązaniem tego problemu jest "Faux Columns", ale trzeba zmienić swoją układ trochę do tego.

Answer 3

Tak. CSS3 ma funkcję calc(). Działa to w obecnych wersjach większości przeglądarek (http://caniuse.com/calc).

height: calc(100% + 250px); 

Demo:

HTML:

<div id="one"></div> 
<div id="two"></div> 

CSS:

div { 
    border: 1px solid red; 
    height: 100px; 
} 

#one { 
    width: calc(50% + 20px); 
} 

#two { 
    width: 50%; 
} 

wyjściowa: