min-height प्रॉपर्टी

min-height प्रॉपर्टी एलिमेंट की न्यूनतम ऊंचाई सेट करती है। इस प्रॉपर्टी के वैल्यू के रूप में कोई भी साइज यूनिट या कीवर्ड none हो सकता है, जो कोई वैल्यू न होने को दर्शाता है।

यह आमतौर पर फ्लोटिंग चौड़ाई वाले एलिमेंट के लिए सेट किया जाता है (ऊंचाई प्रतिशत में दी गई है या बिल्कुल नहीं दी गई है, और एलिमेंट की ऊंचाई उसकी सामग्री के अनुसार बढ़ती है)।

अगर न्यूनतम ऊंचाई सेट की गई है - तो एलिमेंट इस ऊंचाई से छोटा नहीं हो सकेगा। अगर टेक्स्ट min-height के लिए आवश्यकता से कम है, तो एलिमेंट की ऊंचाई min-height के बराबर होगी।

अगर टेक्स्ट अधिक है - तो एलिमेंट की ऊंचाई टेक्स्ट की मात्रा के आधार पर कैलकुलेट होगी।

सिंटैक्स

cssसिलेक्टर {
  min-height: वैल्यू;
}

उदाहरण

इस उदाहरण में ऊंचाई बिल्कुल सेट नहीं की गई है और ब्राउज़र द्वारा स्वत: टेक्स्ट की मात्रा के आधार पर कैलकुलेट की जाएगी। हालाँकि, क्योंकि min-height प्रॉपर्टी सेट है, तो ऊंचाई इस वैल्यू से कम नहीं होगी, भले ही उसमें टेक्स्ट बिल्कुल न हो:

html<div id="elem">
  Lorem ipsum dolor sit amet.
</div>

css#elem {
  min-height: 100px;
  width: 300px;
  border: 1px solid black;
}

Результат:

उदाहरण

आइए एलिमेंट में अधिक टेक्स्ट जोड़ें - ताकि ब्लॉक की ऊंचाई में ओवरफ्लो हो। इस स्थिति में हमारा ब्लॉक अपनी ऊंचाई बढ़ा देगा:

html<div id="elem">
  some long text
</div>

css#elem {
  min-height: 100px;
  width: 300px;
  border: 1px solid black;
  text-align: justify;
}

Результат:

उदाहरण

तुलना के लिए आइए देखें कि क्या होगा अगर ब्लॉक की न्यूनतम ऊंचाई हटा दें, और उसके बजाय height प्रॉपर्टी सेट करें:

html<div id="elem">
  some long text
</div>

css#elem {
  height: 100px;
  width: 300px;
  border: 1px solid black;
  text-align: justify;
  margin-bottom: 50px;
}

Результат:

यह भी देखें