CSS में min-height प्रॉपर्टी

हम CSS min-height प्रॉपर्टी का उपयोग करके किसी एलिमेंट के कंटेंट बॉक्स के लिए एक फिक्स्ड मिनिमम हाइट परिभाषित कर सकते हैं, जो एलिमेंट के कंटेंट बॉक्स को छोटा नहीं होने देता, भले ही हाइट min-height से कम हो।

सिंटैक्स

CSS min-height प्रॉपर्टी का सिंटैक्स निम्नलिखित है:

Selector { min-height: /*value*/ }

उदाहरण

आइए CSS min-height प्रॉपर्टी के लिए एक उदाहरण देखते हैं:

<!DOCTYPE html> <html> <head> <title>CSS min-height Property</title> </head> <style> * { padding: 2px; margin:5px; } button { border-radius: 10px; } #containerDiv { width:70%; margin: 0 auto; padding:20px; background-image: linear-gradient(135deg, #dc3545 0%, #9599E2 100%); text-align: center; border-radius: 10px; } #contentDiv{ min-height:150px; } </style> <body> <div id="containerDiv"> <div id="contentDiv"> This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. </div> <button onclick="add()" class="btn">Set minHeight</button> </div> <script> function add() { document.querySelector('#contentDiv').style.minHeight = "100px"; } </script> </body> </html>

आउटपुट

उपरोक्त कोड के लिए आउटपुट निम्नलिखित है:

'Set minHeight' बटन पर क्लिक करने से पहले -

'Set minHeight' बटन पर क्लिक करने के बाद -

उदाहरण

आइए CSS min-height प्रॉपर्टी का एक और उदाहरण देखते हैं:

<!DOCTYPE html> <html> <head> <title>CSS min-height Property</title> </head> <style> * { padding: 2px; margin:5px; } button { border-radius: 10px; } #containerDiv { width:70%; margin: 0 auto; padding:20px; background-image: linear-gradient(135deg, #dc3545 0%, #9599E2 100%); text-align: center; border-radius: 10px; } #contentDiv1, #contentDiv2{ width:50%; border: 2px solid black; margin: 0 auto; } </style> <body> <div id="containerDiv"> <div id="contentDiv1"> This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. </div> <div id="contentDiv2"> This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy. </div> <button onclick="add()" class="btn">Set minHeight</button> </div> <script> function add() { document.querySelector('#contentDiv1').style.minHeight = "95px"; } </script> </body> </html>

आउटपुट

उपरोक्त कोड के लिए आउटपुट निम्नलिखित है:

'Set minHeight' बटन पर क्लिक करने से पहले -

'Set minHeight' बटन पर क्लिक करने के बाद -