انتقل إلى محتوى الدرس

Min Height Floor Concept مفهوم ضمان أدنى ارتفاع للعنصر

اضمن حداً أدنى موثوقاً لطول البطاقات والأقسام عبر خاصية min-height في لغة CSS لتحافظ على تناسق الواجهة مع المحتوى القصير وتسمح للصندوق بالتمدد التلقائي الآمن عند زيادة النص.
2 صفوف تعليمية
لغة CSS
2,900 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

رأيت في درس الارتفاع خطورة فرض طول جامد مثل height: 180px على بطاقة نصية؛ فبمجرد إضافة جمل عربية أطول أو تكبير القارئ لحجم الخط تفيض الأسطر خارج الإطار السفلي! وفي المقابل، قد يؤدي ترك height: auto وحدها على بطاقة تحوي كلمتين فقط إلى انكماشها بشكل مخل بتناسق الواجهة.

تمنحك خاصية min-height الحل الهندسي الأمثل الذي يجمع بين أرضية طول مضمونة وتمدد آمن غير مقيد:

  • مع المحتوى القصير جداً: تحافظ بطاقة بقاعدة min-height: 180px على حضور بصري متناسق بطول 180px حتى لو لم تضم سوى عنوان مقتضب.
  • مع المحتوى الغزير الطويل: إذا احتاجت الفقرة المشروحة إلى 290px، يتمدد إطار البطاقة بسلاسة تامة إلى 290px ليحتوي كل حرف دون أي فيضان أو تصادم!
الصف 2 ملاحظة هامة