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

परिचय

`min-height` प्रॉपर्टी एलिमेंट की न्यूनतम ऊंचाई सेट करती है। कंटेंट कम होने पर भी यह ऊंचाई बनी रहती है।

सिंटैक्स

min-height: <length> | <percentage> | auto;

उदाहरण

<html>
<head>
    <style>
        .min-height-box {
            width: 400px;
            min-height: 150px;
            border: 1px solid blue;
            padding: 5px;
            margin: 10px;
        }
    </style>
</head>
<body>
    <p class="min-height-box">
        यह पैराग्राफ 400px चौड़ा है और न्यूनतम ऊंचाई 150px है।
        कंटेंट कम होने पर भी बॉक्स 150px ऊंचा रहेगा।
    </p>
    
    <img alt="logo" src="/css/images/logo.png" width="100" height="100" />
</body>
</html>

उपयोग के मामले

• हीरो सेक्शन: `min-height: 100vh` - कम से कम व्यूपोर्ट ऊंचाई
• कार्ड ग्रिड: समान ऊंचाई के कार्ड्स के लिए `min-height`
• फॉर्म फील्ड्स: टच टार्गेट के लिए न्यूनतम ऊंचाई
• साइडबार: `min-height: calc(100vh - header-height)`

संबंधित प्रॉपर्टीज

• `max-height` - अधिकतम ऊंचाई
• `height` - निश्चित ऊंचाई (min-height द्वारा ओवरराइड होता है)
• `min-width` - न्यूनतम चौड़ाई

नोट

अगर `height < min-height`, तो `min-height` जीतता है। अगर `max-height < min-height`, तो `min-height` जीतता है।