का उपयोग कर बनाम मेरे भाई और मैं पहले से ही गड़बड़ कर रहे थे और अचानक उन्होंने चिल्लाया, "मैंने कुछ नया सीखा!"स्टाइलिंग एचटीएमएल और बॉडी चयनकर्ता ऊंचाई: 100%; 100vh
थोड़ा चौंक गया, मैंने पूछा, "वह क्या है ..?"
उसने जवाब दिया, "व्यूपोर्ट ऊंचाई! मैंने आईई 6 में शुरू किया जब यह पूरी तरह से समर्थित नहीं था और कभी भी इसे फिर से नहीं देखा।" फिर उसने मुझे दिखाने के लिए आगे बढ़े।
जिस पर मैंने जवाब दिया, "मैंने यहां वही काम पूरा किया।" और उसे एक और सैंडबॉक्स प्रोजेक्ट दिखाया जिसके साथ मैंने गड़बड़ी की।
मेरी परियोजना में, सीएसएस में, मैं
लिखा(संपादित करें: मैं, नहीं HTML या शरीर, मेरी गलती div में पृष्ठभूमि रंग डालने के लिए संपादित)
(jsfiddle http://jsfiddle.net/nvLq8eg9/embedded/result/)
html, body {
height: 100%;
}
div {
height: 100%;
background: green;
}
अपने कोड, है (jsfiddle http://jsfiddle.net/nvLq8eg9/1/embedded/result/)
div {
height: 100vh;
background: green;
}
दोनों ने वही काम किया था। यहां कुछ शोध करने के बाद, ऐसा प्रतीत होता है कि सामान्य विधि के माध्यम से जारी करने में आमतौर पर चलाने के लिए स्क्रॉल करने में असमर्थता होती है; हालांकि, मेरे सैंडबॉक्स प्रोजेक्ट पर मुझे इसमें अधिक सामग्री थी और सामान्य रूप से वेबसाइट से स्क्रॉल और बातचीत करने में सक्षम था।
हम में से कोई भी यह निर्धारित करने में सक्षम नहीं था कि दोनों तरीकों के बीच मतभेद क्या थे। क्या यहां कोई भी हमें शिक्षित करने में सक्षम होगा?
धन्यवाद! व्यूपोर्ट ऊंचाई की
उत्तरार्द्ध का एक बड़ा लाभ: प्रतिशत में ऊंचाई को मूल तत्व पर ऊंचाई सेट की आवश्यकता होती है, जबकि 'vh' नहीं है, इसलिए आप इसे "हर जगह" का उपयोग कर सकते हैं, यहां तक कि माता-पिता के भीतर की रेखा को और भी नीचे तत्व जिसमें ऊंचाई सेट नहीं है या अलग ऊंचाई है। – CBroe
@ मेद्री: क्या आपने यह आलेख देखा था? http://www.weareconvoy.com/2014/07/css-vw-and-vh-units-are-they-worth-using-yet/ – Grafica
@CBroe धन्यवाद! हमने निश्चित रूप से इसे अनदेखा किया। मैंने व्यक्तिगत रूप से माना कि चूंकि दस्तावेज़ के एचटीएमएल और बॉडी तत्व प्राथमिक माता-पिता होंगे, क्योंकि उनकी ऊंचाई पहले ही 100% पर सेट हो गई है, इससे कोई भी नया तत्व जोड़ा नहीं जाएगा। ऐसा लगता है जैसे वीएच सार्वभौमिक पकड़ के बजाय अधिक विशिष्ट स्टाइल के लिए अनुमति देता है। – Medri