C'è un modo per aggiungere e sottrarre valori nei CSS?

Question

Ho un div che sto posizionando con un margine negativo, ma mi piacerebbe che si estendesse fino in fondo al suo contenitore div in modo da poter usare un bordo che non si esaurisse casualmente. Se guardi allo http://kineticaid.com/k/home.php capirai cosa intendo. Non posso semplicemente estendere la sua altezza in pixel perché l'altezza del contenitore div varia dinamicamente con le pagine. Quello che voglio fare è qualcosa di simile:

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

height: 100% + 250px; 

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

Fondamentalmente sto chiedendo se è possibile aggiungere e sottrarre in CSS. Grazie!

Answer 1

Sass e meno hanno caratteristiche simili simili a quelle di cui hai bisogno, ma penso che la tua richiesta debba essere eseguita con javascript o jquery per eseguire i tuoi calcoli.

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

Answer 2

La soluzione per questo problema è "Faux Columns", ma è necessario modificare il layout un po 'per questo.

Answer 3

Sì. CSS3 ha la funzione calc(). Funziona nelle versioni correnti della maggior parte dei browser (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%; 
} 

uscita: