عنصر XHTML HTML مع ارتفاع 100 ٪ يسبب أشرطة التمرير

Question

في ملف CSS الخاص بي ، أستخدم هذا:

html,body{height:100%;padding:0;margin:0;border:0;}

مما يسبب ظهور شريط التمرير الرأسي على IE8 و Chrome 5 و Mozilla 3.6 ، كل الإصدار الأخير.

وأيضًا ، فإن المستند فارغ ، بل يحتوي على علامات HTML و Head و Head و Body فقط ، لذا لا يوجد شيء يخرج من الشاشة للتسبب في ذلك.

إعداد الفائض: مخفي ؛ على عنصر HTML سوف يتوقف تمامًا عن التمرير على الصفحة.

كيف يمكنني جعل الأمر يزول من فضلك ولكن أيضًا الاستمرار في التمرير عندما يكون المحتوى أعلى من ارتفاع العرض؟

شكرًا لك.

Answer 1

أحتاج إلى ارتفاع 100 ٪ في وثيقة XHTML حتى أتمكن من الحصول على عناصر Div بنسبة 100 ٪.

على أي حال ، وجدت الجواب:

تحدث هذه المشكلة فقط عندما يكون لدى العنصر الأعلى هامشًا أعلى. يبدو أن الهامش الأعلى يضاف إلى ارتفاع 100 ٪ مما يجعله أعلى والتسبب في شريط التمرير.

لذلك ، إما استخدام الحشوة إلى الفضاء في الجزء العلوي من العناصر أو استخدم A مع عدم وجود هامش أعلى بين العلامة والعنصر التالي بهامش أعلى.

Answer 2

الفائض: يجب أن يساعد المخفي ومنع عرض أشرطة التمرير (من المحتمل أن تفقد ~ 1px من المحتوى بسبب أخطاء التقريب

Answer 3

قد تكون هناك طرق أفضل ، لكنني ببساطة أتخلف عن 98 ٪ والتي يبدو أنها تتجنب أشرطة التمرير في جميع المتصفحات.

يمكنك أيضًا ضبط الارتفاع باستخدام JavaScript ولكن هذا يشعر بالاختراق قليلاً

Answer 4

واجهت هذه القضية اليوم ووجدت أن شريط التمرير لم يكن ناتجًا عن هامش أعلى على العنصر الأول ، ولكن من خلال وجود كل من HTML وعناصر الجسم يبلغ ارتفاعه 100 ٪.

لذلك ، باستخدام قاعدة CSS هذه:

html,body { height: 100%; }

أحصل على قضبان التمرير. إذا غيرت ذلك إلى قاعدة CSS هذه:

html { height: 100%; }

لا أحصل على أشرطة التمرير.

سلام...

Answer 5

شريط التمرير العمودي قادم بسبب height:100%. لا تحتاج إلى ذلك ما لم يكن هناك سبب لاستخدام ذلك.

Answer 6

لماذا تحدد ارتفاع 100 ٪ في الجسم؟

سوف تحصل على هذا الارتفاع افتراضيا.

من المنطقي ضبط الارتفاع في الجسم فقط إذا كنت ترغب في ضبط ارتفاع رقمي في PX مثل LET'S SLEE 600PX