كيفية تطبيق ارتفاع 100% في CSS

عندما تستخدم قاعدة الـ CSS height: 100%;، يتم تعيين ارتفاع العنصر ليكون 100% من ارتفاع العنصر الأب الذي يحتوي عليه، ليس 100% من ارتفاع الصفحة بشكل مباشر. إذا كنت تريد تعيين ارتفاع العنصر ليكون 100% من ارتفاع الصفحة، يجب أن يكون لجميع العناصر الأب والأجداد ارتفاع 100% أيضًا.

بمعنى آخر، يجب أن تكون لـ html و body ارتفاع 100%، بالإضافة إلى العنصر الذي يحتوي على #wrapper. يمكنك استخدام الكود التالي لتحقيق ذلك:

cssCopy code
html, body {
    height: 100%;
}

#wrapper {
    height: 100%;
    width: 100%;
    background-color: aliceblue;
}

هذا الكود يضمن أن العنصر #wrapper سيكون بارتفاع 100% من ارتفاع الصفحة بأكملها.

عندما تستخدم قاعدة height: 100%; في CSS، يجب أن يتم تحديد ارتفاع العنصر الأب بقيمة ثابتة. إذا كانت قيمة ارتفاع العنصر الأب غير محددة (مثل height: auto;)، فإن قاعدة height: 100%; لن تعمل بشكل صحيح.

بالإضافة إلى ذلك، إذا كان لديك عناصر أخرى داخل #wrapper وترغب في جعل ارتفاعها يمتد ليصل إلى نهاية #wrapper، يجب عليك أيضًا تعيين ارتفاع تلك العناصر بقيمة 100%، وهكذا لكل عنصر أب في السلسلة.

بشكل عام، إذا كنت تواجه مشكلة في تطبيق قاعدة height: 100%; بشكل صحيح، يجب التحقق من العناصر الأب للعنصر الذي تريد تطبيق الارتفاع عليه، والتأكد من أن جميعها تملك ارتفاعًا ثابتًا محددًا.