सीएसएस मूल्य गणितीय अभिव्यक्ति के रूप में

Question

क्या वैसे भी है कि मैं गणितीय अभिव्यक्ति के रूप में एक सीएसएस मान लिख सकता हूं? उदाहरण:

div{ 
    height: 50% + 30px; 
    width: 40em - 5px; 
    } 

अगर वहाँ है, यह अधिक उचित होगा।
पीएस: मैं जेएस या JQuery के साथ ऐसा नहीं करना चाहता हूं।

Answer 1

आप इसे सीएसएस 3 calc() के साथ प्राप्त कर सकते हैं। इस तरह लिखें: के लिए इस चर्चा

div{ 
    width: 40%; 
    width: -webkit-calc(40% - 5px); 
    width: -moz-calc(40% - 5px); 
    width: calc(40% - 5px); 
    height:50%; 
    height: -webkit-calc(50% + 50px); 
    height: -moz-calc(50% + 50px); 
    height: calc(50% + 50px); 
    background: green; 
    color: white; 
    position:absolute; 
} 

चेक इस http://jsfiddle.net/3QUw6/

चेक अधिक Is it possible to make a div 50px less than 100% in CSS3?

Answer 2

आप सीएसएस के साथ ऐसा नहीं कर सकते, लेकिन आप जा सकते थे (और भी बहुत कुछ) एक सीएसएस पूर्वप्रक्रमक के साथ, LESS, SASS या मेरी पसंदीदा Stylus की तरह। यह अंतिम आउटपुट सादा पुराना सीएसएस है, लेकिन इसे पहले संकलित किया जाना चाहिए।

Answer 3

padding और margin दोनों वस्तुओं के आयामों को जोड़ने के लिए उपयोग किया जा सकता है। मेरा सुझाव है कि आप box model पर पढ़ लें।

HTML:

<div id="container"> 
    <div class="wrapper"> 
     <div>...</div> 
    </div> 
</div> 

सीएसएस:

.wrapper { 
    width: 40em; 
    height: 50%; 
    padding: 15px 0; /* Top and bottom padding of 15px */ } 

/* Block-level element will take up 100% of the 
    container width, minus {margin_right} + {marign_left} */ 
.wrapper > div { margin: 0 0 0 5px; } 

Answer 4

सीएसएस में calc() समारोह पर एक नजर डालें। उम्मीद है कि इसके लिए समर्थन ब्राउज़र में बढ़ेगा।