it-swarm.dev

الارتفاع: 100 ٪ أو دقيقة الطول: 100 ٪ لعناصر HTML والجسم؟

أثناء تصميم التخطيطات ، قمت بتعيين html, body لعناصر height على 100% لكن في بعض الحالات ، يفشل هذا ، فما الذي يجب استخدامه؟

html, body {
   height: 100%;
}

أو

html, body {
   min-height: 100%;
}

حسنًا ، هذا لا يعتمد على الرأي لأن كل طريقة لها عيوبها الخاصة ، فما هي الطريقة الموصى بها للبحث عن السبب ولماذا؟

71
Mr. Alien

إذا كنت تحاول تطبيق صور الخلفية على html و body والتي تملأ نافذة المتصفح بالكامل ، فلا. استخدم هذا بدلاً من ذلك:

html {
   height: 100%;
}

body {
   min-height: 100%;
}

يتم إعطاء تفكيري هنا (حيث أشرح بشكل كلي كيفية تطبيق الخلفيات بهذه الطريقة):

بالمناسبة ، السبب في ضرورة تحديد height و min-height إلى html و body على التوالي هو أن لا يحتوي أي عنصر على أي ارتفاع جوهري. كلاهما height: auto بشكل افتراضي. هو منفذ العرض الذي يبلغ ارتفاعه 100٪ ، لذلك يتم أخذ height: 100% من منفذ العرض ، ثم يتم تطبيقه على body كحد أدنى للسماح بتمرير المحتوى.

الطريقة الأولى ، باستخدام height: 100% على كليهما ، تمنع body من التوسع بمحتوياتها بمجرد أن تبدأ في النمو إلى ما بعد ارتفاع منفذ العرض. من الناحية الفنية ، لا يمنع المحتوى من التمرير ، لكنه يتسبب في ترك body فجوة أسفل الطية ، وهو أمر غير مرغوب فيه عادة.

الطريقة الثانية ، باستخدام min-height: 100% على كليهما ، لا تتسبب في توسيع body إلى الارتفاع الكامل لـ html لأن min-height مع وجود نسبة لا تعمل على body إلا إذا كان html صريحًا height.

من أجل الاكتمال ، يحتوي القسم 10 من CSS2.1 على كل التفاصيل ، لكنه غاية / قراءة ملفتة حتى تتمكن من تخطيها إذا كنت غير مهتم بأي شيء يتجاوز ما أنا لقد أوضح هنا.

171
BoltClock

يمكنك استخدام وحدة ارتفاع منفذ العرض (vh):

body {
    min-height: 100vh;
}

إنها نسبة إلى الشاشة ، وليس إلى ارتفاع الوالدين ، لذلك لا تحتاج إلى ارتفاع html: 100٪.

7
Damjan Pavlica