خاصية الـ height من أكثر الخواص الي تسبب مشاكل لمبرمجين الـ CSS , في هذا الثريد راح أناقش معاكم نقاط جدا مهمة عنها💻
النصيحة الي دايما أقولها لأي شخص يشتغل على الـ Front-end , حاول قدر الإمكان تتجنب تحط height لأي شيء .. لأنه يسبب مشاكل كثيرة جدا ( في هذا الثريد راح نناقش بعضها ) , كبداية خلينا نشوف مثال بسيط جدا ..
ممكن توقعت لما شفت إننا حطينا قيمة 100% لطول الـ div إنه راح يكون ماخذ كامل طول الـ viewport , وزي ماتلاحظ هذا مو الي صار .. ليش ؟ لأننا استخدمنا % , و % تعني ( كم من الـ parent , مثلا 30 في المية من الـ parent ) والـ body بشكل تلقائي ماياخذ كامل طول الـ viewport !
الغريب هنا إنك لو غيرت لون الخلفية لـ body , راح تلاحظ إن كامل لون الصفحة يتغير ! ( هذا مع إن الـ body ماياخذ كامل طول الـ viewport أو الصفحة زي ماذكرنا ) , مثال:
القيمة التلقائية لخاصية الـ height هي auto , والي تعني إن الطول بشكل تلقائي راح يكون 0 وراح يكبر أو يصغر بناء على المحتوى الي داخل هالعنصر .. وهذا الي نبغاه في أغلب الحالات ويوفر على المبرمج شغل كثير جدا
إذا احتجت تحط طول , استخدم min-height أفضل من height , لما تستخدم الـ min-height راح يكون في نقطة معينة الطول مايصغر عنها , بس راح يكبر أو يصغر عشان يتناسب مع المحتوى الي داخله .. وهذا شيء ممتاز وممكن يلبي احتياجك
في الختام أحب أذكركم بوحدة من أسوء المشاكل الي يمكن تواجهها لو حطيت قيمة محددة للـ height وهي مشكلة الـ overflow , خصوصا لما المحتوى مايكفي ينحط داخل الطول الي حطيته, فيخرج عن نطاق العنصر ويسبب مشاكل كبيرة
* النهاية *
لو عجبك الثريد وتبغى تشوف محتوى مشابه تابع حسابي
@Webnprog
ورتويت عشان يوصل لأكبر قدر ممكن من الناس❤️
لو عجبك الثريد وتبغى تشوف محتوى مشابه تابع حسابي
@Webnprog
ورتويت عشان يوصل لأكبر قدر ممكن من الناس❤️
Loading suggestions...