هناك سؤال شائع في تصميم موقع الويب هو "كيف يمكنك تعيين ارتفاع العنصر إلى 100٪"؟
قد يبدو هذا كإجابة سهلة. أنت تستخدم CSS ببساطة لتعيين ارتفاع العنصر إلى 100٪ ، ولكن هذا لا يؤدي دائمًا إلى تمديد هذا العنصر لملائمة نافذة المتصفح بالكامل. لنتعرف على سبب حدوث ذلك وما يمكنك القيام به لتحقيق هذا النمط المرئي.
البكسل والنسب المئوية
عندما تحدد ارتفاع عنصر باستخدام خاصية CSS وقيمة تستخدم وحدات البكسل ، فإن هذا العنصر سيشغل مساحة كبيرة في المستعرض.
على سبيل المثال ، فقرة ذات ارتفاع: 100 بكسل ؛ سيأخذك 100 بكسل من المساحة العمودية في تصميمك. لا يهم مدى حجم نافذة المتصفح ، سيكون هذا العنصر 100 بكسل في الارتفاع.
تعمل النسب المئوية بشكل مختلف عن وحدات البكسل. وفقًا لمواصفات W3C ، يتم حساب الارتفاعات المئوية فيما يتعلق بارتفاع الحاوية. إذا وضعت فقرة ذات ارتفاع: 50٪ ؛ داخل div بارتفاع 100 بكسل ، تكون الفقرة 50 بكسل في الارتفاع ، وهي تمثل 50٪ من عنصرها الرئيسي.
لماذا فشل مرتفعات النسبة المئوية
إذا كنت تصمم صفحة ويب ، وكان لديك عمود ترغب في استخدامه للارتفاع الكامل للنافذة ، فإن الميل الطبيعي هو إضافة ارتفاع: 100٪ ؛ لهذا العنصر. بعد كل شيء ، إذا قمت بتعيين العرض إلى العرض: 100 ٪. سيشغل العنصر المساحة الأفقية الكاملة للصفحة ، لذا يجب أن يعمل الارتفاع على النحو نفسه ، أليس كذلك؟ لسوء الحظ ، هذا ليس هو الحال على الإطلاق.
لفهم سبب حدوث ذلك ، يجب أن تفهم كيفية تفسير المتصفحات للطول والعرض. تقوم متصفحات الويب بحساب إجمالي العرض المتاح كدالة لمدى اتساع نافذة المتصفح. إذا لم تقم بتعيين أي قيم عرض على المستندات الخاصة بك ، فسوف يقوم المتصفح تلقائيًا بتدفق المحتويات لملء عرض النافذة بالكامل (العرض 100٪ هو القيمة الافتراضية).
يتم حساب قيمة الارتفاع بشكل مختلف عن العرض. في الواقع ، لا تقوم المتصفحات بتقييم الارتفاع مطلقًا ما لم يكن المحتوى طويلاً بحيث يخرج من إطار العرض (وبالتالي يتطلب أشرطة التمرير) أو إذا كان مصمم الويب يحدد ارتفاعًا مطلقًا لعنصر في الصفحة. وبخلاف ذلك ، يتيح المتصفح ببساطة تدفق المحتوى داخل عرض إطار العرض حتى يصل إلى النهاية. الارتفاع غير محسوب على الإطلاق.
تحدث المشاكل عند تعيين ارتفاع نسبة مئوية على عنصر يحتوي على عناصر رئيسية بدون مجموعة ارتفاعات - وبعبارة أخرى ، فإن العناصر الرئيسية لها ارتفاع افتراضي: auto؛ . أنت ، في الواقع ، تطلب من المتصفح حساب ارتفاع من قيمة غير محددة. وبما أن ذلك يساوي قيمة فارغة ، فإن النتيجة هي أن المتصفح لا يفعل شيئًا.
إذا كنت ترغب في تعيين ارتفاع على صفحات الويب الخاصة بك إلى نسبة مئوية ، فيجب تعيين ارتفاع كل عنصر أصل من العنصر الذي تريد تحديد الارتفاع به. بمعنى آخر ، إذا كان لديك صفحة مثل هذه:
محتوى هنا
من المرجح أن يكون للجزء والفقرة فيه ارتفاع 100٪ ، ولكن هذا div يحتوي على عنصرين رئيسيين :
و. لتحديد ارتفاع div إلى ارتفاع نسبي ، يجب عليك تعيين ارتفاع الجسم وعناصر html أيضًا.
لذلك ستحتاج إلى استخدام CSS لضبط ارتفاع ليس فقط div ، ولكن أيضًا عناصر body و html. هذا يمكن أن يكون تحديا ، حيث يمكنك بسرعة تغمرها مع كل شيء يتم تعيينه لارتفاع 100 ٪ ، فقط لتحقيق هذا التأثير المطلوب.
بعض الأشياء لتلاحظ عند العمل مع مرتفعات 100 ٪
الآن بعد أن تعرفت على كيفية ضبط ارتفاع عناصر صفحتك إلى 100٪ ، قد يكون من المثير الخروج والقيام بذلك على جميع صفحاتك ، ولكن هناك بعض الأشياء التي يجب أن تكون على علم بها:
- يمكن للهوامش والحشو إضافة شريط تمرير حيث لا تريده. واحدة من أكثر الأشياء المزعجة التي وجدتها مع العمل مع الارتفاعات المئوية (والأعراض) هي أن الحشو والهوامش على هذه العناصر نفسها يمكن أن تضيف أشرطة التمرير إلى الصفحة ، على الرغم من أن جميع المحتوى يعرض دون الحاجة إلى أشرطة التمرير. وذلك لأن ارتفاع أو عرض العنصر هو أول شيء يتم حسابه. ثم يتم إضافة الهوامش والألواح. لذلك إذا كان لديك عنصر بارتفاع 100٪ وهوامش أعلى وأسفل 10 بكسل لكل منهما ، فسيكون هناك شريط تمرير لل 20 بكسل إضافية. تذكر أن نموذج مربع CSS يضيف هامشًا وحدودًا وحشوًا على حجم عنصر ، لذلك ستكون نسبة 100٪ بأي من قيم نماذج الصناديق الأخرى أكثر من 100٪.
- إذا كان المحتوى الخاص بك يأخذ أكثر من الارتفاع المحدد ، فستستبدل أي شيء بعده. بعبارة أخرى ، إذا كان لديك تصميم بعمود بارتفاع 80٪ ، وسيستهلك المحتوى الموجود فيه 100٪ من الارتفاع ، فسيستمر 20٪ إضافيًا أسفل العمود ويكسر التصميم المرئي من صفحتك. إذا كان هناك محتوى أسفل هذا العمود ، فسيكتب النص ببساطة فوقه. كثيرا ما أرى ذلك يحدث عندما يحاول مصمم الويب فرض ارتفاع الصفحة وجعله يعمل بشكل مثالي للإطلاق ، ولكن عندما يتغير محتوى هذه الصفحة في المستقبل ، فإن ارتفاعاتها المطلقة تقطع تدفق الصفحة تمامًا. وهذا صحيح على نحو مضاعف عند إنشاء مواقع الويب المتجاوبة التي يجب تغيير عرضها وارتفاعها مع حجم إطار العرض.
لإصلاح هذا ، يمكنك تعيين ارتفاع العنصر أيضًا. إذا قمت بتعيينه إلى تلقائي ، فسوف تظهر أشرطة التمرير إذا كانت هناك حاجة إليها ولكنها تختفي عندما لا تكون كذلك. يعمل هذا على إصلاح الفاصل المرئي ، ولكنه يضيف أشرطة التمرير حيث قد لا ترغب في مشاهدتها.
باستخدام وحدات viewport
هناك طريقة أخرى يمكنك بها مواجهة هذا التحدي وهي تجربة وحدات Viewport CSS. باستخدام وحدة قياس ارتفاع إطار العرض ، يمكنك تغيير حجم العناصر لرفع الارتفاع المحدد في إطار العرض ، وسيتغير ذلك مع تغير إطار العرض! تُعد هذه طريقة رائعة للحصول على صورك المرتفعة بنسبة 100٪ في الصفحة ، ولكن لا تزال تتسم بالمرونة للأجهزة المختلفة وأحجام الشاشات.