Có cách nào để cộng và trừ các giá trị trong CSS không?

Question

Tôi có một div mà tôi định vị với một lề âm, nhưng tôi muốn nó mở rộng tất cả các con đường xuống dưới cùng của div container của nó vì vậy tôi có thể sử dụng một biên giới mà không chỉ kết thúc ngẫu nhiên. Nếu bạn nhìn vào http://kineticaid.com/k/home.php bạn sẽ hiểu ý tôi là gì. Tôi không thể mở rộng chiều cao tính bằng pixel vì chiều cao của div container thay đổi động với các trang. Những gì tôi muốn làm là một cái gì đó như thế này:

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

height: 100% + 250px; 

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

Về cơ bản tôi hỏi bạn có thể cộng và trừ trong CSS không. Cảm ơn!

Answer 1

Sass và ít có tính năng tương tự như vậy quá những gì bạn cần, nhưng tôi nghĩ những gì bạn yêu cầu sẽ phải được thực hiện với javascript hoặc jquery để làm các phép tính của bạn.

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

Answer 2

Các giải pháp cho vấn đề này là "Faux Columns", nhưng bạn cần phải thay đổi cách bố trí của bạn một chút cho việc này.

Answer 3

Có. CSS3 có chức năng calc(). Tính năng này hoạt động trong các phiên bản hiện tại của hầu hết các trình duyệt (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%; 
} 

Output: