ویژگی min-height در CSS

min-height Property

ویژگی min-height در CSS کمترین اندازه ارتفاع عنصر را مشخص می کند. اگر اندازه ارتفاع محتوای عنصر بیشتر از میزان تعیین شده توسط min-height باشد، این ویژگی تاثیر نخواهد داشت.

نحوه نوشتار

/* استفاده از واحد های اندازه (طول) */
min-height: 3.5em;

/* مقدار با درصد */
min-height: 75%;

/* مقدار یا کلیدواژه */
min-height: none;

مقادیر

طول (واحدهای اندازه)​

کمترین اندازه ارتفاع عنصر توسط مقادیری بر اساس px, cm, rem و .. مشخص می شود. مقدار پیشفرض 0 می باشد.

درصد​

کمترین اندازه ارتفاع را بر حسب درصدی از ارتفاع عنصر والد تعیین می کند.

auto​

اندازه این ویژگی را مرورگر محاسبه و اعمال می کند.

html

<div class="p1">
      <div>min-height: <span>20px</span></div>
      لورم ایپسوم یا طرح‌نما (به انگلیسی: Lorem ipsum) به متنی آزمایشی و بی‌معنی
      در صنعت چاپ، صفحه‌آرایی و طراحی گرافیک گفته می‌شود.
</div>
<div class="p2">
      <div>min-height: <span>230px</span></div>
      لورم ایپسوم یا طرح‌نما (به انگلیسی: Lorem ipsum) به متنی آزمایشی و بی‌معنی
      در صنعت چاپ، صفحه‌آرایی و طراحی گرافیک گفته می‌شود.
</div>

css

div {
    width: 200px;
}
.p1 {
    background-color: lightgreen;
    min-height: 20px;
}
.p2 {
    background-color: lightblue;
    min-height: 230px;
}

مشاهده و ویرایش کد در حالت تمام صفحه

پشتیبانی مرورگرها
تمام مرورگرها از این ویژگی در CSS پشتیبانی می کنند.