ویژگی max-height در CSS

max-height Property

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

نحوه نوشتار

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

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

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

مقادیر

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

بیشترین اندازه ارتفاع را با یک مقدار مطلق مشخص می کند. این مقدار با واحد های اندازه CSS مشخص می شود. (px, rem, em)

درصد​

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

auto​

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

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

html

<div class="box1">
      .این یک متن نمونه است.این یک متن نمونه است.این یک متن نمونه است.این یک متن
      نمونه است
</div>
<div class="box2">
      .این یک متن نمونه است.این یک متن نمونه است.این یک متن نمونه است.این یک متن
      نمونه است
</div>
<div class="wrapper">
    <div class="box3">
        .این یک متن نمونه است.این یک متن نمونه است.این یک متن نمونه است.این یک
        متن نمونه است
    </div>
</div>

css

div {
   float: left;
   margin: 20px 30px 0 0;
   width: 200px;
   background-color: orange;
   direction: rtl;
}
.box1 {
   height: 400px;
   max-height: 200px;
}
.box2 {
   max-height: auto;
}
.wrapper {
   width: 200px;
   height: 300px;
   background-color: lightgreen;
 }
.box3 {
   background-color: pink;
   height: 50%;
   margin: 0;
}

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

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