خاصية Max-Height
آخر تحديث: 2026-09-13
max-height خاصية Max-Height
تضبط خاصية max-height الحد الأقصى لارتفاع العنصر، مانعةً إياه من أن يصبح طويلًا جدًا فيكسر التخطيط. قيمتها الافتراضية none تعني عدم وجود حد أعلى. تُدمج غالبًا مع overflow:auto بحيث يظهر شريط تمرير للمحتوى الأطول من الحد، وهو نمط شائع للمناطق قابلة التمرير ذات الارتفاع الثابت.
| الفئة | |
|---|---|
| القيمة الأولية | none |
| موروث | لا |
| ينطبق على | non-replaced |
| نوع الحركة | length |
| إصدار CSS | CSS2 |
| الحالة | قياسي |
📝 التركيب
max-height: none | <length> | <percentage> | min-content | max-content | fit-content;⚙️ القيم
| القيمة | النوع | الوصف |
|---|---|---|
none | كلمة مفتاحية | لا يوجد ارتفاع أقصى. |
<length> | النوع | ارتفاع أقصى ثابت. |
▶ مثال
عدّل الكود أدناه وشاهد النتيجة المباشرة في الملعب:
🌐 دعم المتصفحات
| المتصفح |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| max-height | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| مدعوم في جميع المتصفحات الرئيسية | |||||
تلميح： يحتاج max-height إلى الاقتران بـ overflow؛ وإلا سيتجاوز المحتوى الحاوية.
❓ الأسئلة الشائعة
Qماذا يحدث عند تحديد max-height و height معًا؟
Aالارتفاع الفعلي هو الأصغر من الاثنين. مع height:100px و max-height:80px، يُعرض العنصر عند 80px؛ ومع height:100px و max-height:150px، يُعرض عند 100px. إذا كان المحتوى أقصر من الارتفاع المحدد، يستخدم العنصر ارتفاع المحتوى. ولتقييد الارتفاع ومعالجة التجاوز معًا، تحتاج أيضًا إلى خاصية overflow، وإلا سينسكب الفائض بشكل مرئي.
Qكيف أنشئ منطقة قابلة للتمرير بارتفاع ثابت؟
Aأعطِ الحاوية max-height مع overflow-y:auto، مثلًا .list { max-height:300px; overflow-y:auto; }. عندما يكون المحتوى أقل من 300px لا يظهر شريط تمرير؛ وبمجرد تجاوز الحد يظهر شريط تمرير رأسي. هذا هو النمط القياسي لسجلات الدردشة وقوائم الإشعارات واللوحات المشابهة، وmax-height أفضل من height هنا لأن المحتوى القصير لا يترك فراغًا بينما المحتوى الطويل ما زال يُمرَّر.
Qكيف أعرض علامة حذف عند تجاوز النص؟
Aللنص في سطر واحد، استخدم white-space:nowrap مع overflow:hidden و text-overflow:ellipsis. لعدة أسطر، استخدم -webkit-line-clamp:2 مع عائلة خصائص -webkit-box بالإضافة إلى overflow:hidden، وهو يعتمد على البادئة -webkit-. في كلتا الحالتين يُقص النص المتجاوز ويُستبدل بعلامة حذف، ولا يمكن تمرير الجزء المخفي لرؤيته، لذا احتفظ بسمة title للنص الكامل.
Qهل يمكن تعيين max-height إلى 0؟
Aنعم. يطوي max-height:0 ارتفاع العنصر إلى صفر ويُستخدم عادةً لحركات الطي والتوسيع: ابدأ بـ max-height:0 مع overflow:hidden لإخفاء، ثم انتقل إلى قيمة كبيرة كافية للتوسيع. إنها الحيلة الكلاسيكية لحركة الارتفاع في CSS؛ وفي الوقت الحاضر يُتحقق نفس التأثير بشكل أفضل عبر الانتقال بـ grid-template-rows بين 0fr و 1fr، مما يتجنب قيمة max-height التعسفية تمامًا.
🏷️ خصائص ذات صلة
💡 حالات ذات صلة
📚 دروس ذات صلة
