एक div को कंटेनर के भीतर के क्षेत्र के बजाय पूरे पृष्ठ को कवर करने की अनुमति दें

Question

मैं पूरी स्क्रीन को कवर करने के लिए एक अर्ध-पारदर्शी डिव बनाने की कोशिश कर रहा हूं। मैंने यह कोशिश की:

#dimScreen
{
    width: 100%;
    height: 100%;
    background:rgba(255,255,255,0.5);
}

लेकिन यह पूरी स्क्रीन को कवर नहीं करता है, यह केवल div के भीतर के क्षेत्र को कवर करता है।

Comments

जोड़position: absolute; top: 0; left: 0;

— सेरगुई पाराशिव

क्या CSS3 या आज उनके पास जो भी एक्सटेंशन हैं उनके लिए कोई अपडेट है?

— विलियम एंट्रीकेन

Answer 1

जोड़ें position:fixed। फिर कवर पूरी स्क्रीन पर तय किया जाता है, वह भी जब आप स्क्रॉल करते हैं।
और जोड़ भी शायद margin: 0; padding:0;इसलिए यह कवर के आसपास कुछ जगह नहीं है।

#dimScreen
{
    position:fixed;
    padding:0;
    margin:0;

    top:0;
    left:0;

    width: 100%;
    height: 100%;
    background:rgba(255,255,255,0.5);
}

और अगर यह स्क्रीन पर स्थिर नहीं होना चाहिए, तो उपयोग करें position:absolute;

सीएसएस ट्रिक्स में फुलस्क्रीन संपत्ति के बारे में एक दिलचस्प लेख भी है।

संपादित करें:
बस इस जवाब में आया था, इसलिए मैं कुछ अतिरिक्त चीजें जोड़ना चाहता था। डैनियल एलन लैंगडन की
तरह टिप्पणी में उल्लेख किया गया है, सुनिश्चित करें कि कवर स्क्रीन के बहुत ऊपर और बाईं ओर चिपक जाता है।top:0; left:0;

यदि आप कुछ तत्व कवर के शीर्ष पर हैं (तो यह सब कुछ कवर नहीं करता है), तो जोड़ें z-index। यह संख्या जितनी अधिक होगी, उतने अधिक स्तर इसमें शामिल होंगे।

Comments

मेरे अनुभव में, मैं भी जरूरतtop: 0; left: 0;

— विवियन नदी

मैं हमेशा इस स्थिति से पूर्ण रूप से जूझता रहा हूं, लेकिन निर्धारित स्थिति का उपयोग करके बहुत बेहतर काम किया है। धन्यवाद

— BrianLegg

जाहिरा तौर पर एक गोचा है: यदि स्थिति: निश्चित तत्व का पूर्वज एक सीएसएस परिवर्तन के साथ है, तो यह व्यूपोर्ट के बजाय उस पूर्वज के सापेक्ष तय किया जाएगा। developer.mozilla.org/en-US/docs/Web/CSS/position#Values

— mpoisot

Answer 2

आप करने के लिए माता पिता के तत्व निर्धारित करने की आवश्यकता 100%के रूप में अच्छी तरह से

html, body {
    height: 100%;
}

डेमो (backgroundडेमो उद्देश्यकेलिएपरिवर्तित)

---

इसके अलावा, जब आप पूरी स्क्रीन को कवर करना चाहते हैं dim, तो ऐसा लगता है कि आप चाहते हैं , इसलिए इस मामले में, आपको उपयोग करने की आवश्यकता हैposition: fixed;

#dimScreen {
    width: 100%;
    height: 100%;
    background:rgba(255,255,255,0.5); 
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100; /* Just to keep it at the very top */
}

यदि ऐसा है, तो आपकी आवश्यकता नहीं है html, body {height: 100%;}

डेमो 2

Comments

शायद माता-पिता में से कोई भी हो position:relative। यह काम नहीं करेगा। सुझाएँ position:fixedबजाय।

— मुहम्मद तल्हा अकबर

@MuhammadTalhaAkbar ओह, मैं देख रहा हूँ, पहले से ही उत्तर दिया है कि, मुझे लगता है कि मुझे अपना उत्तर हटाना चाहिए

— श्री विदेशी

यह दूसरों से बेहतर है यदि आप इसे थोड़ा बदलते हैं।

— मुहम्मद तल्हा अकबर

Answer 3

ये करेगा ट्रिक!

div {
  height: 100vh;
  width: 100vw;
}

Comments

मुझे यह वास्तव में पसंद है क्योंकि यह छोटा और साफ है।

— पुण्यकाल

Answer 4

का प्रयोग करें position:fixedइस तरह से अपने div लगातार पूरे देखने योग्य क्षेत्र पर रहेगा ..

अपनी div को एक क्लास दें overlayऔर अपने CSS में निम्नलिखित नियम बनाएं

.overlay{
    opacity:0.8;
    background-color:#ccc;
    position:fixed;
    width:100%;
    height:100%;
    top:0px;
    left:0px;
    z-index:1000;
}

डेमो: http://www.jsfiddle.net/TtL7R/1/

Answer 5

#dimScreen{
 position:fixed;
 top:0px;
 left:0px;
 width:100%;
 height:100%;
}

Answer 6

इसे इस्तेमाल करे

#dimScreen {
    width: 100%;
    height: 100%;
    background:rgba(255,255,255,0.5);
    position: fixed;
    top: 0;
    left: 0;
}

Answer 7

इस तरह से सभी मार्जिन और पैडिंग को रीसेट करने के लिए एक सीएसएस-रीसेट लागू करें

/* http://meyerweb.com/eric/tools/css/reset/ 

v2.0 | 20110126 लाइसेंस: कोई नहीं (सार्वजनिक डोमेन) * /

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

आप विभिन्न सीएसएस-रिसेट्स का उपयोग कर सकते हैं, जैसा कि आप की जरूरत है, सामान्य और सीएसएस में उपयोग करें

 html
 {
  margin: 0px;
 padding: 0px;
 }

body
{
margin: 0px;
padding: 0px;
}

Comments

यह कैसे प्रासंगिक है?

— एकुप्पी

Answer 8

HTML और बॉडी टैग heightको सेट करें और बॉडी के 100%चारों ओर मार्जिन को हटा दें:

html, body {
    height: 100%;
    margin: 0px; /* Remove the margin around the body */
}

अब positionअपने डिव का सेट करें fixed:

#dimScreen
{
    width: 100%;
    height: 100%;
    background:rgba(255,255,255,0.5);

    position: fixed;
    top: 0px;
    left: 0px;

    z-index: 1000; /* Now the div will be on top */
}

डेमो: http://jsfiddle.net/F3LHW/

Answer 9

कृपया शरीर पर मार्जिन और पैडिंग सेट करने का प्रयास करें।

<body style="margin: 0 0 0 0; padding: 0 0 0 0;">