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

Question

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

html, body { 
    height: 100%; 
} 

या

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

खैर, यह आधारित के रूप में प्रत्येक विधि अपने स्वयं के दोषों है राय नहीं है, तो के लिए और क्यों जाना सुझाया गया तरीका क्या है?

Answer 1

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

html { 
    height: 100%; 
} 

body { 
    min-height: 100%; 
} 

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

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

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

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

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