باستخدام CSS فقط, هل من الممكن إنشاء شعبة الذي يغطي كامل الوثيقة منطقة المحتوى بالضبط ؟

StackOverflow https://stackoverflow.com/questions/908103

  •  05-09-2019
  •  | 
  •  

سؤال

أنا فقط أتساءل إذا كان من الممكن استخدام CSS ولكن ليس جافا سكريبت إلى نمط DIV شأنها أن تغطي كل منطقة المحتوى بالضبط ؟ (ملاحظة:المحتوى كله ، وليس فقط على العرض).يبدو غير ممكن لأن <body> عنصر بعض الهامش و يبدو أنه لا يوجد طريقة سهلة نمط div أن تشمل تلك هامش العرض والارتفاع من الجسم عنصر.ولكن في الواقع هل هذا ممكن ؟

التحديث:آسف الشرط هو أننا لا يمكن تعيين هامش <body> إلى 0...(update2:أقول إذا كنا بحاجة إلى جعلها في المكتبة و لا يمكن أن أطلب من جميع الناس الذين يستخدمونها لوضع الجسم لديهم هامش 0)

هل كانت مفيدة؟

المحلول

إذا كانu003Cbody style=";text-align:right;direction:rtl"> تم تعيين الهامش، ثم لم أستطع استخدام هوامش سلبية علىu003Cdiv style=";text-align:right;direction:rtl"> لتجاوز الهوامش؟ أفهم أن الهوامش يمكن أن تختلف بين المتصفحات. إذا كان لديه هامش 10 بكسل، ثم نمط DIV الخاص بك مثل:

div#mydiv {
margin: -10px;
}

كنت تستخدم نفس المبدأ لتجاوز الحشو (إن أمكن).

نصائح أخرى

بالتأكيد، أعتقد.

إعادة تعيين الهوامش الافتراضية:

* { margin: 0; padding: 0; }

ثم ل

<div id="shader"></div>

فعل:

#shader {position: absolute; width: 100%; height: 100%; min-height: 100%; top: 0; left: 0;}

ربما هذا هو الحل، لكنه لن يعمل في IE ...

div.cover { position: fixed; top: 0px; left: 0px; right: 0px; bottom: 0px; }

منطقيا، هذا مستحيل. حمال الخاص بك يجب أن يذهب داخل الجسم، وليس في الخارج.

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

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

نعم. لقد قمت فقط بتعيين حشوة وهامش العلامة من الجسم إلى 0، ثم قمت بتعيين حشوة وهامش العلامة DIV إلى الصفر.

ماذا عن هذا؟

<div style="position:absolute;left:0px;top:0px;width:100%;height:100%;">...

أحب أمبروز الإجابة.الجسم هو في نهاية المطاف حاوية HTML الخاص بك.أنا لم أر أي هامش في الجسم مع موزيلا, كروم, إنترنت إكسبلورر أو أوبرا -- الإصدارات الحالية.لإثبات ذلك:نمط
body {background-color:أصفر;} /*نظرة.*/

في أي حال, انها دائما ممارسة جيدة لتطبيع المتصفحات الإعداد الهامش, الحشو, الخ إلى الصفر!مثل ديمتري Farkov أعلاه

أعتقد أنه لا توجد طريقة لجعل DIV "تعويم" فوق متصفحك، إذا كان الأمر كذلك، فيمكن للتكنولوجيا التغلب على الشاشة، شيء مثل نمط الجسم = "الهامش: -40px" - هل يجب أن ينزف هذا على سطح المكتب الخاص بك؟

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

لا أعرف ما إذا كان هذا قد يساعد:

<div style="margin:-100%">

لكنني أشك في أن هذا يستطيع التغلب على نافذة المتصفح ...

أعتقد أن نهج Miffthefox هو الأفضل، لأن حلها يغطي الوضع حيث يوجد Divs الأخرى لتحديد المواقع المطلقة. تذكر أن عناصر المواقع المطلقة تنفجر التدفق، وإذا تم وضع أي عنصر على سبيل المثال في الأعلى: 9000PX، فلن يكون ارتفاع الجسم> 9000PX.

<style type="text/css">
    #superdiv{ position:fixed; top:0; left:0; width:100%; height:100%; }
</style>

<div id="superdiv">
    Put some content here.
</div>
مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top