CSS यूनिट - vh / vw और% में क्या अंतर है?

138

मैंने अभी एक नई और असामान्य सीएसएस इकाई के बारे में सीखा है। vhऔर vwक्रमशः व्यूपोर्ट की ऊंचाई और चौड़ाई के प्रतिशत को मापें।

मैंने इस सवाल को स्टैक ओवरफ्लो से देखा, लेकिन इसने इकाइयों को और भी समान बना दिया।

Vw और vh यूनिट कैसे काम करती है

जवाब विशेष रूप से कहते हैं

vw और vh क्रमशः खिड़की की चौड़ाई और ऊंचाई का एक प्रतिशत है: 100vw चौड़ाई का 100% है, 80vw 80% है, आदि।

यह ठीक उसी %इकाई की तरह लगता है , जो अधिक सामान्य है।

डेवलपर टूल में, मैंने vw / vh से% और वाइसवेरा के मानों को बदलने की कोशिश की और उसी परिणाम को प्राप्त किया।

क्या दोनों के बीच कोई अंतर है? यदि नहीं, तो इन नई इकाइयों को क्यों पेश किया गया CSS3?

css viewport-units

— रिचर्ड हैमिल्टन
स्रोत

7

Vw / vh क्या करता है किसी भी माता-पिता पर निर्भरता को दूर करता है और व्यूपोर्ट के आकार के आधार पर आकार देने की अनुमति देता है।

— स्टिकर

2

साथी पाठक, IanC का जवाब आपके दिन को अच्छी तरह से बचा सकता है, इसे अवश्य देखें।

— स्किप्पी ले ग्रैंड गौरू

167

100%किसी 100%भी चीज की ऊंचाई का हो सकता है। उदाहरण के लिए, यदि मेरे पास कोई माता-पिता है, divजो 1000pxलंबा है, और एक बच्चा divजो 100%ऊंचाई पर है, तो वह बच्चा divसैद्धांतिक रूप से व्यूपोर्ट की ऊंचाई से अधिक लंबा हो सकता है, या व्यूपोर्ट की ऊंचाई से बहुत छोटा हो सकता है, भले ही वह divसेट हो 100%ऊंचाई ।

अगर मैं इसके बजाय उस बच्चे को divसेट करता हूं 100vh, तो यह केवल 100%व्यूपोर्ट की ऊंचाई को भर देगा , और माता-पिता को नहीं div।

body,
html {
    height: 100%;
}

.parent {
    background: lightblue;
    float: left;
    height: 200px;
    padding: 10px;
    width: 50px;
}

.child {
    background: pink;
    height: 100%;
    width: 100%;
}

.viewport-height {
    background: gray;
    float: right;
    height: 100vh;
    width: 50px;
}

<div class="parent">
    <div class="child">
        100% height
        (parent is 200px)
    </div>
</div>

<div class="viewport-height">
    100vh height
</div>

स्निपेट का विस्तार करें

— जोश बीम
स्रोत

मेरे पास एक साइडबार था जिसे बूटस्ट्रैप "पंक्ति" के भीतर घोंसला बनाया गया था और मैं ऊंचाई सेट करने के बाद भी इसे पूर्ण पृष्ठ का आकार बनाने में असमर्थ था: 100%। मेरे लिए क्या काम किया 100vh

— raghav710

27

मुझे पता है कि प्रश्न बहुत पुराना है और @ जोश बीम ने सबसे बड़े अंतर को संबोधित किया, लेकिन अभी भी एक और है:

मान लीजिए कि आपके पास एक <div>सीधा बच्चा है, <body>जिसे आप पूरा व्यूपोर्ट भरना चाहते हैं, इसलिए आप इसका उपयोग करें width: 100vw; height: 100vh;। यह सब width: 100%; height: 100vh;तब तक ही काम करता है जब तक आप अधिक सामग्री नहीं जोड़ते हैं और एक ऊर्ध्वाधर स्क्रॉलबार दिखाता है। चूंकि vwव्यूपोर्ट के हिस्से के रूप में स्क्रॉलबार के लिए खाता, की width: 100vw;तुलना में थोड़ा बड़ा होगा width: 100%;। यह थोड़ा अंतर एक क्षैतिज स्क्रॉलबार जोड़ने के लिए समाप्त होता है (उपयोगकर्ता को उस थोड़ी अतिरिक्त चौड़ाई को देखने के लिए आवश्यक है) और परिणाम के अनुसार, ऊंचाई भी दोनों मामलों में थोड़ी भिन्न होगी।

यह ध्यान में रखा जाना चाहिए कि यह तय करते समय कि कौन सा उपयोग करना है, भले ही मूल तत्व का आकार दस्तावेज़ व्यूपोर्ट आकार के समान हो।

उदाहरण:

का उपयोग कर width:100vw;:

.fullviewport {
  width: 100vw;
  height: 100vh;
  background-color: red;
}

.extracontent {
  width: 100vw;
  height: 20vh;
  background-color: blue;
}

<html>
<body>
<div class="fullviewport"></div>
<div class="extracontent"></div>
</body>
</html>

स्निपेट का विस्तार करें

का उपयोग कर width:100%;:

.fullviewport {
  width: 100%;
  height: 100vh;
  background-color: red;
}

.extracontent {
  width: 100%;
  height: 20vh;
  background-color: blue;
}

<html>
<body>
<div class="fullviewport"></div>
<div class="extracontent"></div>
</body>
</html>

स्निपेट का विस्तार करें

— IanC
स्रोत

2

सीएसएस body { overflow: hidden }स्क्रॉलबार प्रदर्शित नहीं होने का कारण होगा।

— डेव एफ

2

आपके उत्तर और कोड उदाहरण के लिए धन्यवाद, @IanC। इसने मेरी बहुत मदद की। एक स्पष्टीकरण: मेरा मानना है कि जब आप "साइडबार" लिखते हैं तो आपका मतलब "स्क्रॉलबार" होता है।

यहां स्क्रॉलपोर्ट की गिनती करने वाली व्यूपोर्ट इकाइयों के बारे में कुछ संबंधित चर्चाएं हैं जो मुझे मददगार लगीं:

W3C कल्पना VW, VH, vmin, VMAX इकाइयों के लिए ( "व्यूपोर्ट प्रतिशत लंबाई") कहते हैं, "किसी भी स्क्रॉलबार मौजूद नहीं ग्रहण कर रहे हैं"।

जाहिरा तौर पर फ़ायरफ़ॉक्स स्क्रॉलबार की चौड़ाई को 100vw से घटाता है, जैसा कि @ नोलनार की टिप्पणी में चौड़ाई के बीच अंतर: 100% और चौड़ाई: 100vw? "कैन आई यूज़" का हवाला देते हुए देखा गया।

क्या मैं कल्पना कर सकता हूं , शायद युक्ति के साथ (?), फ़ायरफ़ॉक्स के अलावा सभी ब्राउज़रों का कहना है कि वर्तमान में "गलत" 100vw को वर्टिकल स्क्रॉल बार सहित पूरे पृष्ठ की चौड़ाई मानते हैं।

— सुस्त अंडरटेकर
स्रोत

1

vw (दृश्य-चौड़ाई) और vh (दृश्य-ऊँचाई) इकाइयाँ दृश्य-पोर्ट आकार से संबंधित होती हैं, जहाँ 100vw या vh, दृश्य-बंदरगाह की चौड़ाई / ऊँचाई का 100% होता है।

उदाहरण के लिए, यदि कोई व्यू-पोर्ट 1600px चौड़ा है, और आप 2vw होने के नाते कुछ निर्दिष्ट करते हैं, तो यह व्यू-पोर्ट चौड़ाई, या 32px के 2% के बराबर होगा।

% इकाई हमेशा वर्तमान तत्व के मूल तत्व की चौड़ाई पर आधारित होती है

0

एक अंतर है जो जरूरी नहीं उठाया गया है। 100vw में स्क्रोल बार की चौड़ाई शामिल है, जबकि 100% में यह शामिल नहीं है। यह एक छोटा अंतर है, लेकिन डिजाइन करते समय महत्वपूर्ण है।

1

IanC का जवाब है। "चूंकि व्यूपोर्ट के हिस्से के रूप में स्क्रॉलबार के लिए vw खाता, चौड़ाई: 100vw; थोड़ा सा बड़ा होगा: 100%:

— j08691