Есть ли способ добавлять и вычитать значения в 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

Да. 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%;
}

Вывод:

Answer 2

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

Answer 3

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

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