Есть ли способ добавить и вычитать значения в CSS?

Question

У меня есть div, который я позиционирую с отрицательным отрывом, но я бы хотел, чтобы он простирался вплоть до нижней части контейнера div, поэтому я могу использовать границу, которая не просто заканчивается случайным образом. Если вы посмотрите на http://kineticaid.com/k/home.php, вы поймете, что я имею в виду. Я не могу просто увеличить его высоту в пикселях, потому что высота контейнера div динамически изменяется со страницами. То, что я хочу сделать что-то вроде этого:

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

height: 100% + 250px; 

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

В основном я спрашиваю, если вы можете складывать и вычитать в CSS. Благодаря!

Answer 1

Sass и меньше имеют аналогичные функции и то, что вам нужно, но я думаю, что ваши просьбы должны быть выполнены с помощью javascript или jquery для выполнения ваших расчетов.

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

Answer 2

Решение этой проблемы является "Faux Columns", но вы должны изменить макет немного для этого.

Answer 3

Да. CSS3 имеет функцию calc(). Это работает в текущих версиях большинства браузеров (http://caniuse.com/calc).

height: calc(100% + 250px); 

Демо:

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%; 
} 

Выход: