ऊंचाई: 100% या न्यूनतम ऊंचाई: HTML और शरीर के तत्वों के लिए 100%?

Question 1

लेआउट डिजाइन करते समय मैंने सेट किया html, body तत्वों ' heightको 100%तो क्या किया जाना चाहिए लेकिन कुछ मामलों में, इस विफल रहता है,?

html, body {
   height: 100%;
}

या

html, body {
   min-height: 100%;
}

खैर, यह राय आधारित नहीं है क्योंकि प्रत्येक विधि की अपनी खामियां हैं, इसलिए क्या करने के लिए अनुशंसित तरीका है और क्यों?

Question 2

यदि आप पृष्ठभूमि की छवियों को लागू करने का प्रयास कर रहे हैं htmlऔर bodyयह पूरी ब्राउज़र विंडो को भरने के लिए है, न तो। इसके बजाय इसका उपयोग करें:

html {
   height: 100%;
}

body {
   min-height: 100%;
}

मेरा तर्क यहां दिया गया है (जहां मैं समग्र रूप से समझाता हूं कि इस तरीके से पृष्ठभूमि कैसे लागू की जाए):

संयोग से, कारण है कि आपको यह निर्दिष्ट करना heightऔर min-heightकरने के लिए htmlऔर bodyक्रमशः है क्योंकि न तो तत्व किसी भी आंतरिक ऊंचाई है। दोनों height: autoडिफ़ॉल्ट रूप से हैं। यह व्यूपोर्ट है जिसकी ऊंचाई 100% है, इसलिए height: 100%व्यूपोर्ट से लिया जाता है, फिर bodyसामग्री स्क्रॉल करने की अनुमति देने के लिए न्यूनतम के रूप में लागू किया जाता है।

पहला तरीका, height: 100%दोनों का उपयोग करते हुए, bodyव्यूपोर्ट ऊँचाई से आगे बढ़ने के बाद इसकी सामग्री के विस्तार से रोकता है। तकनीकी रूप से यह सामग्री को स्क्रॉल करने से नहीं रोकता है, लेकिन इसका कारण बनता हैbody तह के नीचे एक अंतर छोड़ने का है, जो आमतौर पर अवांछनीय है।

min-height: 100%दोनों का उपयोग करने का दूसरा तरीका, bodyपूर्ण ऊंचाई तक विस्तार का कारण नहीं बनता है htmlक्योंकि min-heightएक प्रतिशत के साथ काम नहीं करता है bodyजब तक htmlकि एक स्पष्ट न होheight ।

संपूर्णता की खातिर, CSS2.1 की धारा 10 में सभी विवरण शामिल हैं, लेकिन यह एक अत्यंत जटिल पाठ है इसलिए आप इसे छोड़ सकते हैं यदि आप किसी भी चीज़ में रुचि नहीं रखते हैं जो मैंने यहाँ समझाया है।

Question 3

आप व्यूपोर्ट ऊँचाई ( vh) इकाई का उपयोग कर सकते हैं :

body {
    min-height: 100vh;
}

यह स्क्रीन के सापेक्ष है, माता-पिता की ऊँचाई के लिए नहीं, इसलिए आपको html ऊँचाई की आवश्यकता नहीं है: 100%।