विंडो चौड़ाई \ ऊंचाई

Question

बदलते समय ऑटो आकार बदलने वाला एक div मैंने हर जगह देखा है। और अभी भी एक बहुत ही "मूल" विचार के नमूना कोड के साथ नहीं आ सकता:

एक div जो स्क्रीन आकार का 9 0% ले रहा है और ब्राउज़र आकार में परिवर्तन होने पर यह स्वयं को समायोजित कर रहा है (90% रिश्तेदार स्क्रीन)

नेस्टेड divs अंदर यह आकार, खुद के फिर से करना चाहिए ..

यह भी संभव है?

संपादित करें:

चौड़ाई 90% काम नहीं कर रहा जब मैं खड़ी आकार की स्क्रीन फिर से प्रयास करें।

Answer 1

इस परिदृश्य में, बाहरी <div> की चौड़ाई और ऊंचाई 90% है। आंतरिक div> में इसके माता-पिता का 100% चौड़ाई है। खिड़की को फिर से आकार देने पर दोनों पैमाने पर।

एचटीएमएल

<div> 
    <div>Hello there</div> 
</div> 

सीएसएस

html, body { 
    width: 100%; 
    height: 100%; 
} 

body > div { 
    width: 90%; 
    height: 100%; 
    background: green; 
} 

body > div > div { 
    width: 100%; 
    background: red; 
} 

डेमो

Try before buy

Answer 2

वीएच विशेषताओं का प्रयोग करें। इसका मतलब व्यूपोर्ट ऊंचाई है और एक प्रतिशत है। तो ऊंचाई: 90vh व्यूपोर्ट ऊंचाई की 90% का मतलब होगा। यह अधिकांश आधुनिक ब्राउज़रों में काम करता है।

ईजी।

div { 
    height: 90vh; 
} 

आप शरीर पर अपने शेष 100% सामान से आगे निकल सकते हैं।

यदि आपके पास हेडर है तो आप कुछ मजेदार चीजें भी कर सकते हैं जैसे सीएसएस में कैल्क फ़ंक्शन का उपयोग करके इसे ध्यान में रखें।

ईजी।

div { 
    height: calc(100vh - 50px); 
} 

यह आपको आपके हेडर के लिए व्यूपोर्ट ऊंचाई का 100%, शून्य 50px देगा।