हम CSS max-height प्रॉपर्टी का उपयोग करके किसी एलिमेंट के कंटेंट बॉक्स के लिए एक निश्चित अधिकतम ऊंचाई परिभाषित कर सकते हैं जो एलिमेंट के कंटेंट बॉक्स को उससे ऊंचा नहीं होने देती, भले ही ऊंचाई max-height से अधिक हो।
सिंटैक्स
CSS max-height प्रॉपर्टी का सिंटैक्स निम्नानुसार है:
Selector { max-height: /*value*/ }
आइए CSS max-height प्रॉपर्टी का एक उदाहरण देखते हैं:
उदाहरण
<!DOCTYPE html> <html> <head> <title>CSS max-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{ max-height:50px; overflow: hidden; } </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 maxHeight</button> </div> <script> function add() { document.querySelector('#contentDiv').style.maxHeight = "100px"; } </script> </body> </html>
आउटपुट
'Set maxHeight' बटन पर क्लिक करने से पहले:
'Set maxHeight' बटन पर क्लिक करने के बाद:
आइए CSS max-height प्रॉपर्टी का एक और उदाहरण देखते हैं:
दूसरा उदाहरण
<!DOCTYPE html> <html> <head> <title>CSS max-height</title> <style> form { width:70%; margin: 0 auto; text-align: center; } * { padding: 2px; margin:5px; } #containerDiv { margin: 0 auto; max-height: 150px; } </style> </head> <body> <form> <fieldset> <legend>CSS max-height</legend> <div id="containerDiv"> <img id="image" src="https://www.tutorialspoint.com/openshift/images/openshift-mini-logo.jpg"> </div> </fieldset> </form> </body> </html>
आउटपुट
max-height परिभाषित करने से पहले:
max-height परिभाषित करने के बाद:
