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