2010-02-26 24 views
25

मैं इस सीएसएस का उपयोग अधिकतम ऊंचाई तक एक <div> स्थापित करने के लिएऊंचाई: 100 वी.एस. मिनट ऊंचाई%: 100%

किसी को भी मुझे एक सामान्य जवाब दे सकते हैं, height: 100% और min-height: 100% के बीच अंतर क्या?

+1

fyi min-height सभी ब्राउज़रों द्वारा समर्थित नहीं है – marcgg

+7

केवल तभी यदि आप ब्राउज़र के रूप में IE <= 6 को चिह्नित करते हैं। इससे परे कुछ भी इसका समर्थन करता है। – BalusC

उत्तर

24

यहाँ W3C से एक विवरण (link) है:

निम्नलिखित कलन विधि बताता है कि कैसे दो गुण [मिनट-ऊंचाई और अधिकतम ऊंचाई] 'ऊंचाई' संपत्ति का इस्तेमाल किया मूल्य को प्रभावित:
ऊपर की ऊंचाई और मार्जिन की गणना के तहत नियमों के बाद टेंटेटिव प्रयुक्त ऊंचाई की गणना की जाती है (बिना 'न्यूनतम ऊंचाई' और 'अधिकतम-ऊंचाई')।
यदि यह टेंटेटिव ऊंचाई 'अधिकतम ऊंचाई' से अधिक है, तो ऊपर दिए गए नियम दोबारा लागू होते हैं, लेकिन इस बार 'ऊंचाई' के लिए गणना मूल्य के रूप में 'अधिकतम-ऊंचाई' के मान का उपयोग करते हुए।
यदि परिणामी ऊंचाई 'न्यूनतम ऊंचाई' से छोटी है, तो ऊपर दिए गए नियम दोबारा लागू होते हैं, लेकिन इस बार 'ऊंचाई' के लिए गणना मूल्य के रूप में 'न्यूनतम-ऊंचाई' के मान का उपयोग करते हुए।

सारांशित करने के लिए: असल में, यदि ऊंचाई ऊंचाई अन्यथा होनी चाहिए (चाहे कोई स्पष्ट ऊंचाई निर्दिष्ट हो या नहीं), तो न्यूनतम ऊंचाई ऊंचाई के रूप में उपयोग की जाती है। यदि न्यूनतम ऊंचाई ऊंचाई की तुलना में कम है, तो न्यूनतम ऊंचाई का कोई प्रभाव नहीं पड़ता है।

विशेष मामले के आप दे के लिए,height:100% को निर्दिष्ट तत्व से युक्त ब्लॉक के ऊंचाई के बराबर की ऊंचाई बना देता है। (हालांकि, संभावित रूप से इसे ओवरराउल्ड किया जा सकता है, उदाहरण के लिए यदि आपने max-height:50% भी निर्दिष्ट किया है।) min-height:100% निर्दिष्ट करना है कि यदि गणना की गई ऊंचाई 100% से कम है, तो वास्तव में यदि आपने स्पष्ट रूप से 100% से कम ऊंचाई निर्दिष्ट की है, तो यह माना जाता है कि आपने कहा height:100%। ध्यान दें कि एक महत्वपूर्ण अंतर यह है कि अधिकतम ऊंचाई ऊंचाई को ओवरराल कर सकती है लेकिन न्यूनतम ऊंचाई को ओवरराल नहीं कर सकती है (क्योंकि अधिकतम ऊंचाई ऊंचाई के बाद माना जाता है लेकिन ऊपर उल्लिखित W3C अनुशंसा के अनुसार न्यूनतम ऊंचाई से पहले)।

1

ऊंचाई आपके तत्व को इसके कंटेनर के 100% आकार के आकार में रखेगी।

मिनट ऊंचाई कंटेनर आकार

की 100% मिनट के लिए तत्व डाल देंगे लेकिन तुम क्यों कि ऐसा करने के लिए वैसे भी चाहेगा? यदि न्यूनतम-ऊंचाई 100% है यह IE7 में कुछ शोध के बाद मेरी राय में कोई असर ...

नहीं होगा तो यह आपको एक समस्या का समाधान दे सकता है:

http://www.search-this.com/2007/02/05/css-min-height-explained/

10

height: 100% जाना होगा कंटेनर ऊंचाई के 100% तक; min-height: 100% को कंटेनर की ऊंचाई के पीछे विस्तार करना चाहिए यदि इसकी आवश्यकता भी है।

ध्यान रखें कि आईई में न्यूनतम ऊंचाई समर्थित नहीं है।

7

न्यूनतम ऊंचाई के बारे में मैंने देखा एकमात्र व्यावहारिक उपयोग पृष्ठ के निचले हिस्से में एक पाद लेख चिपका रहा है।निम्नलिखित कोड पर विचार करें:

<html> 
    <head></head> 
    <body style="height: 100%"> 
    <div style="height: 100%"> 
     <div style="height: auto; min-height: 100%; background-color: blue;"> 
     <div class="main" style="padding-bottom: 300px;"> 
     </div> 
     </div> 
     <div class="footer" style="height: 300px; background-color: red; margin-top: -300px;"></div> 
    </div> 
    </body> 
</html> 

लाल जब मुख्य div खाली है दृश्य पोर्ट की तह तक अटका हुआ है, और जैसा कि आप सामग्री के साथ मुख्य div भरने, लाल पाद लेख अभी भी के नीचे करने के लिए लाठी पृष्ठ।

बिंदु को चित्रित करने के लिए, यदि आप केवल ऊंचाई का उपयोग करते हैं: मुख्य div पर 100% और सामग्री के साथ इसे भरें, लाल पाद लेख व्यूपोर्ट के नीचे होवर करेगा। 100% के रूप में निर्दिष्ट ऊंचाई व्यूपोर्ट की सीमाओं के बाहर मुख्य div का विस्तार नहीं करती है जैसे कि यदि आप ऊंचाई घोषित करेंगे: ऑटो; न्यूनतम ऊंचाई: 100%।

+1

क्षमा करें महोदय, लेकिन क्या आप "मुख्य" वर्ग में "ऊंचाई: ऑटो" के अर्थ की व्याख्या कर सकते हैं? मैंने इस अभिव्यक्ति को ऊंचाई 100% लेआउट के कई उदाहरणों में देखा है। कुछ कोड भी "ऊंचाई: ऑटो! महत्वपूर्ण"। हालांकि, मैं यह नहीं समझता कि यह नियम कैसे कार्य करता है – Dan

संबंधित मुद्दे