एक div को कंटेनर

के क्षेत्र के बजाय पूरे पृष्ठ को कवर करने की अनुमति दें, मैं पूरी स्क्रीन को अर्ध-पारदर्शी div कवर करने की कोशिश कर रहा हूं। मैंने यह कोशिश की:एक div को कंटेनर

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

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

स्रोत

2013-09-03 Juicy

'स्थिति जोड़ें: पूर्ण; शीर्ष: 0; बाएं: 0; ' –

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

101

की जरूरत नहीं है 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;

CSS Tricks का उपयोग भी फुलस्क्रीन संपत्ति के बारे में एक दिलचस्प लेख है।

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

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

स्रोत

2013-09-03 09:38:26

मेरे अनुभव में, मुझे 'शीर्ष: 0; बाएं: 0; ' –

मैंने हमेशा इसके साथ पूर्ण स्थिति के साथ संघर्ष किया है, लेकिन स्थिति तय करने से काफी बेहतर काम किया है। धन्यवाद – BrianLegg

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

साथ ही आप 100% को पेरेंट तत्व सेट करने के लिए

html, body { 
    height: 100%; 
}

Demo (बदल दिया 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%;}

Demo 2

स्रोत

2013-09-03 09:37:54

हो सकता है कि किसी भी माता-पिता के पास 'स्थिति: रिश्तेदार' हो। यह काम नहीं करेगा। इसके बजाए 'स्थिति: निश्चित' का सुझाव दें। –

@MuhhammadTalhaAkbar ओह, मैं देखता हूं, पहले से ही उत्तर दिया है, मुझे लगता है कि मुझे अपना जवाब –

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

इस

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

स्रोत

2013-09-03 09:38:42

एक सीएसएस रीसेट करने के लिए इस

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

वी 2 की तरह सभी मार्जिन और paddings पुनर्स्थापित करने के लिए लागू करें की कोशिश करो।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; 
}

स्रोत

2013-09-03 09:39:11 Rex

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

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

स्रोत

2013-09-03 09:40:52 tabone

एचटीएमएल और शरीर सेट टैग height से 100% और शरीर के चारों ओर मार्जिन को हटाएं:

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

अब fixed करने के लिए अपने div की position सेट:

#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/

स्रोत

2013-09-03 09:51:35 Vlabs

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

देना अपने एक कक्षा overlay div और अपने सीएसएस

.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/

स्रोत

2013-09-10 07:26:54

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

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

स्रोत

2014-10-31 11:56:46

यह चाल करेगा!

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

स्रोत

2016-09-12 00:35:06

एक div को कंटेनर

उत्तर

संबंधित मुद्दे