تستخدم خاصية max-height في ضبط + التحكم في أقصي طول ممكن لعناصر HTML علي المتُصفح بلغة CSS, لو زاد حجم محتوي العنصر علي أقصي طول للعنصر max-wdith بشكل تلقائي سوف يطفح المحتوي خارج العنصر ولكن عن طريق خاصية overflow يممكن معالجة هذا الأمر.

لو المحتوي أقل من طول العنصر فأن خاصية max-height لا تؤثر علي العنصر ويكون ليس لها وظيفة في هذة الحالة.
في حال أن للعنصر طول بخاصية height أكبر من خاصية max-height فأن الطول الُمحدد بخاصية max-height يكون هو الزي له تأثير علي العنصر ويلغي الطول المٌحدد بخاصية height.

قيم خاصية max-height في لغة CSS:

none هي الوضع الأفتراضي وأن العنصر ليس له حد أقصي للطول ويعمل فقط بخاصية height.
length ضبط أقصي طول للعنصر بوحدات مختلفة مثل px,cm,em,rem.
percentage ضبط أقصي طول للعنصر بالنسبة المئوية % علي حسب العنصر الأب parent.

CSS max-height syntax

طريقة كتابة خاصية max-height في لغة CSS.

max-height:value;

CSS max-height values

قيم خاصية max-height في لغة CSS.

max-height:none|length|initial|inherit;

ملاحظة

سوف يطفح المحتوي خارج حدود العنصر لو كان حجم المحتوي أطول من القيمة الموجودة داخل خاصية max-height في حال أن العرض له قيمة ثابتة أقل من قيمة المحتوي.

</> CSS max-height none
خاصية max-height مع القيمة none في لغة CSS

في حال أن أقصي طول للعنصر مُحدد بقيمة none مع خاصية max-height في لغة CSS فأن العنصر يكون ليس له حد أقصي مطلقاًُ ويتم إحتساب الطول علي حسب خاصية height.

جربها بنفسك

CSS max height none

خاصية max-height والقيمة none في لغة CSS.

p 
{
  max-height:none;
  height:100px;
  border: 1px solid red;
}

جربها بنفسك

</> CSS max-height length
خاصية max-height مع القيمة length في لغة CSS

يطفح محتوي العنصر خارج حدود العنصر في حال أن المحتوي أكبر من القيمة المُحددو داخل خاصية max-height في لغة CSS.

جربها بنفسك

CSS max height length

خاصية max-height والقيمة length في لغة CSS.

.max
{
  max-height:100px;
  width:200px;
  border: 1px solid red;
}

جربها بنفسك

معلومات تهمك

لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.

عدد المشاركات

التالى

CLOSETAG

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

CSS Max Height
خاصية max-height للتحكم في أقصي طول للعنصر بلغة CSS

التاريخ

الدروس

المستوى

اللغة

المشاهدات

المواضيع

الشروحات CSS Max Height CSS