CSS

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

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

التاريخ

17 نوفمبر 2022

الدروس

137

المستوى

مبتدئ

اللغة

انجليزي

المشاهدات

658

المواضيع

24
الشروحات chevron_left CSS Max Height chevron_left CSS
CSS Flex Box keyboard_arrow_down

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

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

تستخدم خاصية 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;
}
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات