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 پشتیبانی می کنند.