كيفية تعيين ارتفاع عنصر HTML إلى 100٪

بعض الأشياء لتلاحظ عند العمل مع مرتفعات 100 ٪

الآن بعد أن تعرفت على كيفية ضبط ارتفاع عناصر صفحتك إلى 100٪ ، قد يكون من المثير الخروج والقيام بذلك على جميع صفحاتك ، ولكن هناك بعض الأشياء التي يجب أن تكون على علم بها:

• يمكن للهوامش والحشو إضافة شريط تمرير حيث لا تريده.واحدة من أكثر الأشياء المزعجة التي وجدتها بالعمل مع الارتفاعات المئوية (والأعراض) هي أن الحشو والهوامش على هذه العناصر نفسها يمكن أن تضيف أشرطة التمرير إلى الصفحة ، على الرغم من أن كل المحتوى يعرض دون الحاجة إلى أشرطة التمرير. وذلك لأن ارتفاع أو عرض العنصر هو أول شيء يتم حسابه. ثم يتم إضافة الهوامش والألواح. لذلك إذا كان لديك عنصر بارتفاع 100٪ وهوامش أعلى وأسفل 10 بكسل لكل منهما ، فسيكون هناك شريط تمرير لل 20 بكسل إضافية. تذكر أن نموذج مربع CSS يضيف هامشًا وحدودًا وحشوًا على حجم عنصر ، لذلك ستكون نسبة 100٪ بأي من قيم نماذج الصناديق الأخرى أكثر من 100٪.
• إذا كان المحتوى الخاص بك يأخذ أكثر من الارتفاع المحدد ، فستستبدل أي شيء بعده.بعبارة أخرى ، إذا كان لديك تصميم بعمود بارتفاع 80٪ ، وسيستهلك المحتوى الموجود فيه 100٪ من الارتفاع ، فسيستمر 20٪ إضافيًا أسفل العمود ويكسر التصميم المرئي من صفحتك. إذا كان هناك محتوى أسفل هذا العمود ، فسيكتب النص ببساطة فوقه. كثيرا ما أرى ذلك يحدث عندما يحاول مصمم الويب فرض ارتفاع الصفحة وجعله يعمل بشكل مثالي للإطلاق ، ولكن عندما يتغير محتوى هذه الصفحة في المستقبل ، فإن ارتفاعاتها المطلقة تقطع تدفق الصفحة تمامًا. وهذا صحيح على نحو مضاعف عند إنشاء مواقع الويب المتجاوبة التي يجب تغيير عرضها وارتفاعها مع حجم إطار العرض.

لإصلاح هذا ، يمكنك تعيين ارتفاع العنصر أيضًا. إذا قمت بتعيينها إلى

تلقاءي،

سوف تظهر أشرطة التمرير إذا كانت مطلوبة ولكنها تختفي عندما لا تكون كذلك.يعمل هذا على إصلاح الفاصل المرئي ، ولكنه يضيف أشرطة التمرير حيث قد لا ترغب في مشاهدتها.