CSS3 ऊंचाई: कैल्क (100%) काम नहीं कर रहा है

मेरे पास एक div है कि मैं शरीर की पूरी ऊंचाई को एक निश्चित संख्या को पिक्सेल में भरना चाहता हूं। लेकिन मुझे ऊंचाई नहीं मिल सकती: काम करने के लिए कैल्क (100% - 50 पीएक्स)।CSS3 ऊंचाई: कैल्क (100%) काम नहीं कर रहा है

(कारण मैं यह करना चाहता हूं कि मेरे पास ऐसे तत्व हैं जिनके पास कुछ अलग-अलग मानदंडों के आधार पर गतिशील ऊंचाई है, उदाहरण के लिए विभिन्न तत्वों के आधार पर हेडर परिवर्तन की ऊंचाई। सामग्री सामग्री को भरने के लिए खींचने की आवश्यकता है शेष उपलब्ध स्थान उपलब्ध है।)

div तत्व हालांकि सामग्री की ऊंचाई रहता है - ऐसा प्रतीत नहीं होता है कि यह शरीर तत्व की ऊंचाई होने के लिए 100% का अर्थ है।

एचटीएमएल:

<header>Some nav stuff here</header> 
<h1>This is the heading</h1> 
<div id="theCalcDiv">This blocks needs to have a CSS calc() height of 100% - the height of the other elements.</div>

सीएसएस: http://jsfiddle.net/ElizabethMeyer/UF3mb/:

body {background: blue; height:100%;position:relative;} 
header {background: red; height: 20px; width:100%} 
h1 {font-size:1.2em; margin:0; padding:0; height: 30px; font-weight: bold; background:yellow} 
#theCalcDiv {background:green; height: calc(100% - (20px + 30px + 20px)); display:block}

बेला देखें।

मैं सही दिशा में किसी भी मदद या पॉइंटर्स की सराहना करता हूं।

स्रोत

2013-04-23 elizabethmeyer

ध्यान दें कि 'calc' में [सभी] (http समर्थित नहीं है: // caniuse .com/calc) ब्राउज़र, सफारी और डिफ़ॉल्ट एंड्रॉइड ब्राउज़र की तरह। – Aquillo

@Aquillo '-webkit-calc()' आईओएस –

पर सफारी और सफारी के हाल के संस्करणों में समर्थित है, मैंने अभी देखा है कि 'सफारी 6' के साथ बदल गया है, आप सही डेविड हैं। – Aquillo

आप यह सुनिश्चित एचटीएमएल और शरीर 100% की तैयारी में हैं और यह भी calc के लिए विक्रेता उपसर्गों को जोड़ने के लिए है, तो -moz-calc, -webkit-calc सुनिश्चित हो की जरूरत है।

बाद सीएसएस काम करता है:

html,body { 
    background: blue; 
    height:100%; 
    padding:0; 
    margin:0; 
} 
header { 
    background: red; 
    height: 20px; 
    width:100% 
} 
h1 { 
    font-size:1.2em; 
    margin:0; 
    padding:0; 
    height: 30px; 
    font-weight: bold; 
    background:yellow 
} 
#theCalcDiv { 
    background:green; 
    height: -moz-calc(100% - (20px + 30px)); 
    height: -webkit-calc(100% - (20px + 30px)); 
    height: calc(100% - (20px + 30px)); 
    display:block 
}

मैं भी एचटीएमएल और शरीर पर 0 करने के लिए अपने मार्जिन/padding सेट, अन्यथा एक स्क्रॉलबार होगा जब इस पर जोड़ा जाता है।

यहाँ एक अद्यतन बेला

http://jsfiddle.net/UF3mb/10/

ब्राउज़र समर्थन है: IE9 +, Firefox 16+ और विक्रेता उपसर्ग Firefox 4+, क्रोम 19+ साथ, Safari 6+

स्रोत

2013-04-23 08:56:41 daamsie

यह पूरी तरह से काम किया, धन्यवाद! – elizabethmeyer

मैं इसके लिए खोज रहा था, धन्यवाद! '-मोज़-कैल्क 'और' -वेबिट-कैल्क 'की आवश्यकता है! – Gibberish

यह वास्तव में आवश्यक नहीं है कि एचटीएमएल और बॉडी 100% ऊंचाई पर सेट हो। यह सिर्फ इतना है कि यदि आप 100% ऊंचाई चाहते हैं, यदि युक्त तत्व जितना लंबा हो उतना लंबा नहीं है, तो यह केवल तत्वों की 100% ऊंचाई होने जा रहा है। यदि आपके केवल एकमात्र तत्व शरीर और एचटीएमएल हैं, तो 'कैल्क' का उपयोग करने में कोई बात नहीं है, बस 'ऊंचाई: 100% ' –

html और body दोनों को 100% ऊंचाई पर सेट करने का प्रयास करें;

html, body {background: blue; height:100%;}

स्रोत

2013-04-23 08:49:21

आप नहीं करते कुछ भी गणना करने के लिए की जरूरत है, और शायद नहीं करना चाहिए:

<!DOCTYPE html> 
<head> 
<style type="text/css"> 
    body {background: blue; height:100%;} 
    header {background: red; height: 20px; width:100%} 
    h1 {font-size:1.2em; margin:0; padding:0; 
     height: 30px; font-weight: bold; background:yellow} 
    .theCalcDiv {background-color:green; padding-bottom: 100%} 
</style> 
</head> 
<body> 
<header>Some nav stuff here</header> 
<h1>This is the heading</h1> 
<div class="theCalcDiv">This blocks needs to have a CSS calc() height of 100% - the height of the other elements. 
</div>

मैं संक्षिप्तता के लिए एक साथ यह सब अटक गया।

स्रोत

2013-04-23 09:23:12 msw

का उपयोग करें मुझे कैल्क() की आवश्यकता है - स्पष्ट रूप से उदाहरण अधिक जटिल परियोजना के बजाय सिर्फ एक डमी है मुझे इस समस्या का सामना करना पड़ रहा है। भ्रम का कारण क्या हो सकता है कि मेरे पास एक चिपचिपा पाद लेख भी है, और साइट को देखे जाने वाले डिवाइस के बावजूद, हेडर और पाद लेख के बीच खींचने के लिए सामग्री div की आवश्यकता है। – elizabethmeyer

@elizabethmeyer स्पष्टीकरण के लिए धन्यवाद – msw

फर्स्ट ऑफ - फ़ायरबग (या आपकी प्राथमिकता क्या है) के साथ जांच करें कि क्या सीएसएस संपत्ति ब्राउज़र द्वारा व्याख्या की जा रही है। कभी-कभी इस्तेमाल किया जाने वाला टूल आपको वहां समस्या देगा, इसलिए कोई शिकार नहीं।

दूसरा बंद - जाँच संगतता: http://caniuse.com/#feat=calc

और तीसरा - मैं कुछ घंटे पहले कुछ समस्याओं में चलाया, लेकिन अब यह संकल्प लिया। यह सबसे छोटी बात है लेकिन यह मुझे 30 मिनट तक व्यस्त रखती है।

यहाँ कैसे मेरी सीएसएस देखा

#someElement { 
    height:calc(100%-100px); 
    height:-moz-calc(100%-100px); 
    height:-webkit-calc(100%-100px); 
}

सही नहीं लग रहा है यह करता है? गलत यहाँ यह कैसे दिखना चाहिए:

#someElement { 
    height:calc(100% - 100px); 
    height:-moz-calc(100% - 100px); 
    height:-webkit-calc(100% - 100px); 
}

लग रहा है एक ही है ना?

रिक्त स्थान पर ध्यान दें !!! एंड्रॉइड के लिए फ़ायरफ़ॉक्स, एंड्रॉइड के लिए फ़ायरफ़ॉक्स, एंड्रॉइड के लिए क्रोम, क्रोम और फ़ायरफ़ॉक्स विंडोज और इंटरनेट एक्सप्लोरर 11 के लिए। यदि कोई रिक्त स्थान नहीं था तो उनमें से सभी ने सीएसएस को नजरअंदाज कर दिया।

उम्मीद है कि यह किसी की मदद करेगा।

स्रोत

2015-11-13 13:56:21 Kickass

हां, ** रिक्त स्थान पर ध्यान दें !!! ** मैंने केवल घंटों के मामलों को जानने के लिए Chrome में काम करने के लिए इसे प्राप्त करने का प्रयास किया। – JDawg

आप एक GWT परियोजना में calc स्टाइल रहे हैं, तो अपने पार्सर calc आप के लिए के रूप में यह मेरे लिए नहीं था पार्स नहीं हो सकता है ... solution एक सीएसएस शाब्दिक इस तरह में लपेट के लिए है:

height: literal("-moz-calc(100% - (20px + 30px))"); height: literal("-webkit-calc(100% - (20px + 30px))"); height: literal("calc(100% - (20px + 30px))");

स्रोत

2015-12-29 08:58:47 cellepo

पदानुक्रम में सभी मूल तत्वों की ऊंचाई 100% होनी चाहिए। बस अधिकतम ऊंचाई दें: तत्व और अधिकतम ऊंचाई के लिए 100%: तत्काल मूल तत्व में कैल्क (100% - 90 पीएक्स)।

यह आईई पर भी मेरे लिए काम करता था।

html, 
body { 
    height: 100% 
} 

parent-element { 
    max-height: calc(100% - 90px); 
} 

element { 
    height:100%; 
}

आईई में रेंडरिंग कैलक की विफलता के कारण विफल हो जाती है जब विंडो का आकार बदलता है या डेटा डोम में लोड होता है। लेकिन ऊपर वर्णित इस विधि ने भी आईई में मेरे लिए काम किया।

स्रोत

2016-02-11 12:31:24 Manas

कैल्क अब अच्छी तरह से समर्थित है और व्यूपोर्ट इकाइयों के अतिरिक्त भी यह आसान बनाता है। VH इकाइयों का प्रयोग अच्छी तरह से काम करना चाहिए नीचे समाधान, आप ऊंचाई ऑटो के लिए शरीर सेट कर सकते हैं, बस यह सुनिश्चित theCalcDiv प्रदर्शन है: ब्लॉक

body {background: blue; height:100%;} 
header {background: red; height: 20px; width:100%} 
h1 {font-size:1.2em; margin:0; padding:0; 
    height: 30px; font-weight:bold; background:yellow} 
#theCalcDiv {background:green; 
    min-height:calc(100vh - (20px + 30px)); 
    display:block}

स्रोत

2017-03-17 08:21:00

CSS3 ऊंचाई: कैल्क (100%) काम नहीं कर रहा है

उत्तर

संबंधित मुद्दे