विभिन्न परिदृश्यों के परीक्षण के बाद, मेरा मानना है कि यह सबसे अच्छा समाधान है:
html {
width: 100%;
height: 100%;
display: table;
}
body {
width: 100%;
display: table-cell;
}
html, body {
margin: 0px;
padding: 0px;
}
यह उस में गतिशील है htmlऔर bodyतत्व अपनी सामग्री के अतिप्रवाह होने पर स्वचालित रूप से विस्तार करेंगे। मैंने फ़ायरफ़ॉक्स, क्रोम और IE 11 के नवीनतम संस्करण में इसका परीक्षण किया।
यहाँ पूरी फ़िडल देखें (आपके लिए टेबल से नफरत होने पर, आप इसे डिव का उपयोग करने के लिए हमेशा बदल सकते हैं):
https://jsfiddle.net/71yp4rh1/9/
कहा जा रहा है कि, यहाँ पोस्ट किए गए उत्तरों के साथ कई मुद्दे हैं ।
html, body {
height: 100%;
}
उपरोक्त सीएसएस का उपयोग करने से html और बॉडी एलिमेंट का स्वतः विस्तार नहीं होगा, यदि उनकी सामग्री यहाँ दिखाई गई है।
https://jsfiddle.net/9vyy620m/4/
जैसा कि आप स्क्रॉल करते हैं, दोहराए जाने वाली पृष्ठभूमि पर ध्यान दें? ऐसा इसलिए हो रहा है क्योंकि बॉडी एलिमेंट की हाइट उसके चाइल्ड टेबल ओवरफ्लो होने के कारण नहीं बढ़ी है। यह किसी अन्य ब्लॉक एलिमेंट की तरह विस्तृत क्यों नहीं होता है? मुझे यकीन नहीं है। मुझे लगता है कि ब्राउज़र इसे गलत तरीके से संभालते हैं।
html {
height: 100%;
}
body {
min-height: 100%;
}
शरीर पर 100% की न्यूनतम ऊंचाई निर्धारित करना जैसा कि ऊपर दिखाया गया है अन्य समस्याओं का कारण बनता है। यदि आप ऐसा करते हैं, तो आप यह निर्दिष्ट नहीं कर सकते हैं कि एक बाल दिवस या तालिका यहां दिखाए गए प्रतिशत को ऊपर ले जाएगी:
https://jsfiddle.net/aq74v2v7/4/
आशा है कि यह किसी की मदद करता है। मुझे लगता है कि ब्राउज़र इसे गलत तरीके से संभाल रहे हैं। मैं उम्मीद करूंगा कि अगर बच्चों के अतिप्रवाह में शरीर की ऊँचाई अपने आप बढ़ने लगे तो वे अपने आप ही बड़े हो जाएंगे। हालाँकि, ऐसा प्रतीत नहीं होता है जब आप 100% ऊंचाई और 100% चौड़ाई का उपयोग करते हैं।