有沒有辦法在CSS中添加和減去值？

我有一個div，我定位與負邊距，但我希望它一直延伸到它的容器div的底部，所以我可以使用不僅隨機結束的邊框。如果你看看http://kineticaid.com/k/home.php你會明白我的意思。我不能只用像素來擴展其高度，因爲容器div的高度會隨頁面動態變化。我想要做的是這樣的：有沒有辦法在CSS中添加和減去值？

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

height: 100% + 250px; 

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

基本上我詢問是否可以添加和CSS中減去。謝謝！

來源

2011-12-27 Brad

有CSS預處理器一樣都不能少或上海社會科學院即增加這樣的功能，但我真的不知道，如果這是你的要求。 – 2011-12-27 10:08:30

我想我只是在尋找一種方法來將像素和百分比結合到同一個CSS語句中，如果這甚至是可能的話。 – Brad 2011-12-27 10:11:36

檢查這個問題 http://stackoverflow.com/questions/527861/value-calculation-for-css 可能是你可以使用JavaScript ... – Nalaka526 2011-12-27 10:13:19

Sass和更少有類似的功能，你需要什麼，但我認爲你所要求的將不得不用JavaScript或jQuery做你的計算。

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

來源

2011-12-27 10:13:28

這個問題的解決方案是"Faux Columns"，但你需要改變你的佈局有點這一點。

來源

2011-12-27 10:14:19 Burntime

這是好的，但它需要使用Photoshop這是不是真的走上我的衚衕：p – Brad 2011-12-27 10:20:56

僅僅因爲一項技能不是「走上你的衚衕」並不能阻止它成爲一個好的解決方案。基本的圖像編輯是相當核心的Web開發人員技能 – Gareth 2011-12-27 10:33:05

嗯，這也不是我所問的。我想知道如果CSS有任何內置的能力來增加和減少不同類型的值。不過這是一個很好的解決方案。 – Brad 2011-12-27 10:43:09

是的。 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%; 
}

輸出：

enter image description here

來源

2011-12-27 10:25:46 ThinkingStiff

謝謝，我會研究一下。很高興知道這種事情已經包含在CSS3中。 – Brad 2011-12-27 10:40:47

還有一個webkit供應商前綴 – Burntime 2011-12-27 10:51:23

有沒有辦法在CSS中添加和減去值？

回答

相關問題