الخاصية max-height

الخاصية max-height في CSS تضبط الارتفاع الأقصى للعنصر، وهي تمنع القيمة المستخدمة (used value) للخاصية height من أن تتجاوز القيمة المُحدَّدة في الخاصية max-height.

/* <length> أطوال */
max-height: 3.5em;

/* <percentage> نسب مئوية */
max-height: 75%;

/* كلمات محجوزة */
max-height: none;

/* قيم عامة */
max-height: inherit;
max-height: initial;
max-height: unset;

الخاصية max-height لها أولوية على الخاصية height، لكن الخاصية min-height لها أولوية على max-height.

القيمة الابتدائية	none
تُطبَّق على	جميع العناصر، ما عدا العناصر السطرية غير المُستبدَلة (non-replaced inline elements)، وأعمدة الجداول، ومجموعات الأعمدة.
قابلة للوراثة	لا
قابلة للتحريك	نعم
القيمة المحسوبة	نسبة مئوية أو طول مطلق أو الكلمة المحجوزة none.

أمثلة

سنستخدم في المثال الآتي عنصر <div> ارتفاعه يساوي 300px على ألّا يتجاوز قيمة الخاصية max-height ألا وهي 30vh (أي 30% من ارتفاع إطار العرض):

<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

شيفرة CSS:

div {
  height: 300px;
  max-height: 30vh;
}

لاحظ أنَّك إذا قللتَ ارتفاع نافذة المتصفح، فسيقل ارتفاع العنصر السابق، لأنَّ ارتفاع إطار العرض قد نقص؛ وإذا لم يتسع المحتوى ضمن العنصر، فسينظر المتصفح ما هي قيمة الخاصية overflow لكي يعرف ما هو السلوك الذي يجب تطبيقه.

دعم المتصفحات

الميزة	Chrome	Firefox	Internet Explorer	Opera	Safari
الدعم الأساسي	1.0	1.0	7.0	7.0	1.0

البنية العامة

القيمة none

لا يوجد ارتفاع أقصى لهذا العنصر.

القيمة <length>

تحديد الارتفاع الأقصى بالأطوال المطلقة.

القيمة <percentage>

تحديد الارتفاع الأقصى كنسبة مئوية من ارتفاع العنصر الكتلي الحاوي للعنصر الحالي. وإذا لم يكن ارتفاع ذلك العنصر مُحدَّدًا بوضوح، فستعامل قيمة النسبة المئوية على أنها صفر.

البنية الرسمية

max-height: <length> | <percentage> | none;

مصادر ومواصفات

• مسودة CSS Intrinsic & Extrinsic Sizing Module Level 3، أضافت هذه المواصفة الكلمات المحجوزة max-content و min-content و fit-content و fill-available لكنها ليست مدعومة في المتصفحات بعد.
• مسودة CSS Transitions.
• مواصفة ‎CSS Level 2 (Revision 1)‎.