¿Hay alguna forma de sumar y restar valores en CSS?

Question

Tengo un div que estoy posicionando con un margen negativo, pero me gustaría que se extienda hasta el fondo de su contenedor div para que pueda usar un borde que no termina al azar. Si miras al http://kineticaid.com/k/home.php, entenderás lo que quiero decir. No puedo simplemente extender su altura en píxeles porque la altura del div del contenedor cambia dinámicamente con las páginas. Lo que quiero hacer es algo como esto:

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

height: 100% + 250px; 

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

Básicamente estoy preguntando si se puede sumar y restar en el CSS. ¡Gracias!

Answer 1

Sass y menos tienen características similares también lo que necesita, pero creo que lo que necesita debe hacerse con javascript o jquery para hacer sus cálculos.

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

Answer 2

La solución para este problema es "Faux Columns", pero hay que cambiar el diseño un poco de esto.

Answer 3

Sí. CSS3 tiene la función calc(). Esto funciona en las versiones actuales de la mayoría de los navegadores (http://caniuse.com/calc).

height: calc(100% + 250px); 

Demostración:

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

Salida: