تعلم - الارتفاع: 100٪ أو الحد الأدنى للارتفاع: 100٪ لعناصر html و body؟



weschool html (1)

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

html {
   height: 100%;
}

body {
   min-height: 100%;
}

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

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

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

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

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

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

html, body {
   height: 100%;
}

أو

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

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





css