خاصية Height
آخر تحديث: 2026-09-13
height خاصية Height
تضبط خاصية height ارتفاع منطقة محتوى العنصر وهي، إلى جانب width، خاصية أبعاد أساسية في نموذج الصندوق بـ CSS. تسمح قيمتها الافتراضية auto للمتصفح بحساب الارتفاع من المحتوى، وهو الأسلوب الأكثر شيوعًا والموصى به. ولا تُفعَّل النسب المئوية للارتفاع إلا عندما يكون للأصل ارتفاع صريح؛ وإلا فتُحل إلى 0.
| الفئة | |
|---|---|
| القيمة الأولية | auto |
| موروث | لا |
| ينطبق على | non-replaced |
| نوع الحركة | length |
| إصدار CSS | CSS1 |
| الحالة | قياسي |
📝 التركيب
height: auto | <length> | <percentage> | min-content | max-content | fit-content;⚙️ القيم
| القيمة | النوع | الوصف |
|---|---|---|
auto | كلمة مفتاحية | يحسب المتصفح الارتفاع تلقائيًا. |
<length> | النوع | قيمة طول ثابتة. |
<percentage> | النوع | نسبة مئوية بالنسبة لارتفاع الكتلة الحاضنة. |
▶ مثال
عدّل الكود أدناه وشاهد النتيجة المباشرة في الملعب:
🌐 دعم المتصفحات
| المتصفح |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| height | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| مدعوم في جميع المتصفحات الرئيسية | |||||
تحذير： تتطلب النسبة المئوية للارتفاع أن يكون للأصل ارتفاع صريح؛ وإلا فلا تأثير لها. استخدم وحدات vh إذا أردت أن يملأ العنصر إطار العرض (viewport).
❓ الأسئلة الشائعة
Qلماذا لا يعمل height:100%؟
Aلأن النسبة المئوية للارتفاع تُحل بالنسبة لارتفاع منطقة محتوى الأصل، وعندما يكون ارتفاع الأصل auto (الافتراضي)، فإن 100% من auto يظل auto، لذا تُتجاهل النسبة المئوية للابن. الحلول: أعطِ الأصل ارتفاعًا صريحًا، وهو الإصلاح الأبسط ويعمل في كل مكان؛ استخدم وحدات vh حيث يعادل height:100vh ارتفاع إطار العرض؛ أو استخدم flex أو grid لكي يتمدد الابن تلقائيًا.
Qكيف أجعل ارتفاع العنصر ينمو مع محتواه؟
Aحافظ على القيمة الافتراضية height:auto؛ عندها يتحدد ارتفاع العنصر على مستوى الكتلة بمحتواه. ولتحكم أدق، اجمع بين min-height كحد أدنى و max-height كحد أقصى: يضمن min-height:200px حدًا أدنى للارتفاع مع السماح للصندوق بالنمو عندما يكون المحتوى أطول، و يحد max-height الارتفاع معالجًا الفائض عبر overflow. تجنب تثبيت height للمحتوى العادي.
Qما الفرق بين height:auto و height:100vh؟
Aيُحدّد height:auto حجم العنصر بمحتواه، فالمحتوى القصير يُنتج صندوقًا قصيرًا والمحتوى الطويل يُنتج صندوقًا طويلًا. أما height:100vh فيجعل العنصر بارتفاع إطار العرض تمامًا، فيملأ الشاشة بالكامل حتى مع قليل من المحتوى ويفيض عند تجاوز المحتوى له. ولجعل جسم الصفحة بارتفاع شاشة واحدة على الأقل مع السماح بالنمو، فضّل min-height:100vh على height:100vh.
Qكيف أجعل العنصر الابن يملأ ارتفاع الأصل؟
Aالخيار الأول: أعطِ الأصل ارتفاعًا ثابتًا والابن height:100%. الخيار الثاني: اجعل الأصل display:flex واترك الابن يتمدد عبر align-self:stretch، لأن عناصر flex تتمدد افتراضيًا. الخيار الثالث: في grid، استخدم height:100% أو 1fr للابن. لاحظ أن height:100% يعمل فقط عندما يكون للأصل نفسه ارتفاع محدد؛ وإلا فسيُتجاهل.
🏷️ خصائص ذات صلة
💡 حالات ذات صلة
📚 دروس ذات صلة
