في هذا الدرس 5تصفّح المواضيع
رأيت في درس الارتفاع خطورة فرض طول جامد مثل height: 180px على بطاقة نصية؛ فبمجرد إضافة جمل عربية أطول أو تكبير القارئ لحجم الخط تفيض الأسطر خارج الإطار السفلي! وفي المقابل، قد يؤدي ترك height: auto وحدها على بطاقة تحوي كلمتين فقط إلى انكماشها بشكل مخل بتناسق الواجهة.
تمنحك خاصية min-height الحل الهندسي الأمثل الذي يجمع بين أرضية طول مضمونة وتمدد آمن غير مقيد:
- مع المحتوى القصير جداً: تحافظ بطاقة بقاعدة
min-height: 180pxعلى حضور بصري متناسق بطول180pxحتى لو لم تضم سوى عنوان مقتضب. - مع المحتوى الغزير الطويل: إذا احتاجت الفقرة المشروحة إلى
290px، يتمدد إطار البطاقة بسلاسة تامة إلى290pxليحتوي كل حرف دون أي فيضان أو تصادم!
عند تصميم مكونات الواجهة مثل بطاقات المزايا، صناديق الحالة الفارغة قبل وصول البيانات، أو مساحات الملاحظات، يمنحك ضبط min-height بوحدتي px أو rem اتزاناً بصرياً أنيقاً دون أدنى مخاطرة بقص النصوص الطويلة.
كما يساعد اختيار وحدة rem مثل min-height: 11rem مع box-sizing: border-box على تناسب الحد الأدنى لطول البطاقة تلقائياً كلما عدّل الزائر حجم الخط الافتراضي في متصفحه.
.feature-card {
min-height: 130px;
padding: 16px;
box-sizing: border-box;
border: 2px solid #7750b2;
}من أهم القواعد الذهبية في بناء واجهات الويب الاحترافية تفضيل min-height: 100vh أو min-height: 100dvh دائماً على height: 100vh الجامدة عند تصميم أقسام الترحيب الممتدة على كامل الشاشة أو الغلاف العام للصفحة!
والسبب واضح؛ فعلى الشاشات المكتبية الواسعة يملأ كلاهما طول النافذة بالجمال نفسه، لكن عندما يقلب الزائر هاتفه إلى الوضع الأفقي القصير أو يكبّر الصفحة بنسبة 150%، تحبس height: 100vh إطار القسم فتفيض العناوين والأزرار فوق القسم التالي! أما min-height: 100dvh فتغطي كامل النافذة كحد أدنى، وتتمدد للأسفل بأمان تام متى احتاج المحتوى مساحة أطول.
body {
margin: 0;
}
.welcome-screen {
min-height: 100dvh;
padding: 32px;
box-sizing: border-box;
}تتبع النسب المئوية في خاصية min-height القاعدة نفسها الخاصة بارتفاع الأب؛ فلا بد أن يمتلك العنصر الأب ارتفاعاً صريحاً محدداً حتى تُترجم قاعدة مثل min-height: 60% على الابن إلى حد أدنى فعلي بالبكسل، وإلا آلت النسبة إلى الصفر عند بقاء الأب على height: auto.
عندما تمنح حاوية أب طولاً صريحاً مثل height: 220px، تضمن قاعدة min-height: 60% أن يبدأ اللوح الابن بطول لا يقل عن 132px مع احتفاظه بحرية التمدد إن زادت فقراته.
.stage-box {
height: 200px;
padding: 12px;
box-sizing: border-box;
}
.inner-panel {
min-height: 60%;
padding: 12px;
}ماذا يحدث لو اجتمعت خصائص الارتفاع الثلاث في تعارض مباشر على عنصر واحد، كأن تكتب معاً height: 100px و max-height: 140px و min-height: 200px؟ تنص مواصفة W3C القياسية لتحجيم الصناديق على قاعدة حاسمة: تمتلك min-height الأولوية العليا النهائية دائماً؛ إذ تطبَّق max-height أولاً ثم تأتي min-height لترفع النتيجة إلى حدها الأدنى، فيُحسم الطول النهائي عند 200px!
اختبر هذا التفوق عملياً في المختبر التفاعلي التالي، ثم راجع الجدول الشامل لقواعد الارتفاع الثلاث:
| الخاصية | القيمة الابتدائية | الوظيفة الهندسية الأساسية | الأولوية عند التعارض |
|---|---|---|---|
height | auto | تحدد الطول المفضل لمنطقة المحتوى | تخضع لكل من max-height و min-height |
max-height | none | تضع سقفاً علوياً يمنع التمدد الزائد | تتغلب على height الأكبر وتخضع لـ min-height الأكبر |
min-height | auto | تضمن أرضية طول دنيا مع حرية التمدد | الفائز الأعلى دائماً عند الزيادة على القيمتين |
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
في ملخص الدرس أتقنت توظيف min-height لضمان حد أدنى متناسق يتمدد بأمان مع النصوص الغزيرة، وميزة min-height: 100dvh في أقسام ملء الشاشة، وتفوق min-height الحاسم عند التعارض مع height و max-height. في الخطوة التالية ننتقل إلى درس خاصية max-width للتحكم في أقصى عرض للعنصر في لغة CSS لبناء حاويات أفقية مرنة ومتجاوبة.
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 Minimum Height Floor الحد الأدنى للارتفاع
- طول ابتدائي مضمون يُحدد عبر خاصية min-height لمنع انكماش العناصر القصيرة مع السماح للمحتوى الطويل بالتمدد بحرية.
- للمراجعة
- 02 Safe Viewport Section قسم ملء النافذة الآمن
- استخدام min-height: 100vh أو 100dvh بدلاً من الطول الجامد ليغطي القسم الشاشة ويتمدد بأمان عند تكبير الخط.
- للمراجعة
- 03 Vertical Sizing Precedence أولوية خصائص الارتفاع
- القاعدة القياسية في CSS التي تمنح min-height التفوق النهائي على كل من height و max-height عند التعارض.
- للمراجعة
- 04 Placeholder Floor حجز المساحة المسبق
- منح حاويات الوسائط قيمة min-height لحجز مكانها ومنع قفز التخطيط أثناء اكتمال تحميل الصور أو الرسوم.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات3
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 DVH DVH
- Dynamic Viewport Height
- تُقترن غالباً مع min-height: 100dvh لبناء أقسام تملأ شاشة الهاتف دون قص المحتوى السفلي.
- للمراجعة
- 02 W3C W3C
- World Wide Web Consortium
- منظمة المعايير العالمية التي تحدد مواصفة تحجيم الصناديق وتفوق خاصية min-height عند التعارض.
- للمراجعة
- 03 UI UI
- User Interface
- واجهة المستخدم ومكوناتها البصرية كالبطاقات واللافتات التي يعتمد اتزانها الطولي على min-height.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
-
افتح مثال البطاقات القابلة للتمدد وكرر الجملة داخل البطاقة الأولى ثلاث مرات لتتحقق من تمدد إطارها بسلاسة فوق 130px دون فيضان.
-
في مثال ملء النافذة أضف أربع فقرات إضافية داخل .welcome-screen وتأكد أن القسم التالي يبقى أسفله بانتظام دون أي تداخل نصي.
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.