डिव ओवरले करें संपूर्ण पृष्ठ (केवल व्यूपोर्ट नहीं)?

तो मुझे एक समस्या है जो मुझे लगता है कि काफी आम है लेकिन मुझे अभी तक एक अच्छा समाधान नहीं मिला है। मैं एक ओवरले div को पूरे पृष्ठ को कवर करना चाहता हूं ... न केवल व्यूपोर्ट। मुझे समझ में नहीं आता कि ऐसा क्यों करना मुश्किल है ... मैंने शरीर, एचटीएमएल ऊंचाई 100% आदि सेट करने की कोशिश की है लेकिन यह काम नहीं कर रहा है।डिव ओवरले करें संपूर्ण पृष्ठ (केवल व्यूपोर्ट नहीं)?

<html> 
<head> 
    <style type="text/css"> 
    .OverLay { position: absolute; z-index: 3; opacity: 0.5; filter: alpha(opacity = 50); top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; background-color: Black; color: White;} 
    body { height: 100%; } 
    html { height: 100%; } 
    </style> 
</head> 

<body> 
    <div style="height: 100%; width: 100%; position: relative;"> 
     <div style="height: 100px; width: 300px; background-color: Red;"> 
     </div> 
     <div style="height: 230px; width: 9000px; background-color: Green;"> 
     </div> 
     <div style="height: 900px; width: 200px; background-color: Blue;"></div> 
     <div class="OverLay">TestTest!</div> 
    </div> 


    </body> 
</html>

मैं भी जावास्क्रिप्ट में एक समाधान के लिए खुला, यदि कोई मौजूद होगा, लेकिन मैं बहुत बल्कि सिर्फ कुछ सरल सीएसएस का उपयोग कर होगा: यहाँ क्या मैं अब तक है।

स्रोत

2010-05-17 Polaris878

भी अधिक यहाँ पढ़ सकते हैं नहीं लगता है: http://stackoverflow.com/questions/1938536/how-to-make-the-height-really-100/1938592# 1 9 38592 –

क्या यह jQuery के साथ वास्तविक के लिए किया जा सकता है? –

181

व्यूपोर्ट सब कुछ मायने रखता है, लेकिन संभव है कि आप पूरी वेबसाइट को स्क्रॉल करते समय भी अंधेरे रहना चाहें। इसके लिए, आप position:absolute के बजाय position:fixed का उपयोग करना चाहते हैं। फिक्स्ड स्क्रीन को स्क्रॉल करते समय स्क्रीन पर स्थिर रखेगा, इंप्रेशन देकर कि पूरे शरीर को अंधेरा कर दिया गया है।

उदाहरण: सभी के http://jsbin.com/okabo3/edit

div.fadeMe { 
    opacity: 0.5; 
    background: #000; 
    width:  100%; 
    height:  100%; 
    z-index: 10; 
    top:  0; 
    left:  0; 
    position: fixed; 
}

<body> 
    <div class="fadeMe"></div> 
    <p>A bunch of content here...</p> 
</body>

स्रोत

2010-05-17 19:58:44 Sampson

मैं गलत हो सकता हूं, लेकिन आईई 6 में निश्चित काम करेगा ?! मुझे पता है कि शायद कोई भी आईई 6 के बारे में ज्यादा परवाह नहीं करता है। –

+22

@ मार्को सुनिश्चित नहीं है। ईमानदार होने के लिए, यदि 10 साल के ब्राउज़र के लिए समर्थन स्पष्ट रूप से अनुरोध नहीं किया गया है, तो मैं अब और परेशान नहीं होने वाला हूं :) – Sampson

तो आप इसे मोबाइल उपकरणों पर कैसे करते हैं? http://bradfrostweb.com/blog/mobile/fixed-position/ – incarnate

सबसे पहले, मैं तुम्हें गलत समझा गया है क्या व्यूपोर्ट है लगता है। व्यूपोर्ट वह क्षेत्र है जहां ब्राउजर वेब पेजों को प्रस्तुत करने के लिए उपयोग करता है, और आप किसी भी तरह से इस क्षेत्र को ओवरराइड करने के लिए अपनी वेबसाइटों का निर्माण नहीं कर सकते हैं।

दूसरा, ऐसा लगता है कि आपका ओवरले-div को कवर नहीं करेगा क्योंकि संपूर्ण व्यूपोर्ट है क्योंकि आपको बॉडी और HTML पर सभी मार्जिन को हटाना होगा।

अपनी स्टाइलशीट के शीर्ष पर इसे जोड़ने का प्रयास करें - यह सभी तत्वों पर सभी मार्जिन और पैडिंग रीसेट करता है। आगे के विकास के आसान बना देता है:

* { margin: 0; padding: 0; }

संपादित करें: मैं सिर्फ आपके प्रश्न के सही समझा।Position: fixed;शायद आपके लिए काम करेगा, जैसा कि जोनाथन सैम्पसन ने लिखा है।

स्रोत

2010-05-17 20:00:05

आपको * सब कुछ * से पैडिंग और मार्जिन को नहीं हटाया जाना चाहिए। बटन और फॉर्म इनपुट जैसे कई तत्वों के लिए उन्हें वापस लाने के लिए वास्तव में श्रमिक हो सकता है। – Sampson

मेरी राय में, यह ब्राउज़रों में जितना अधिक सब कुछ करने का एक आसान तरीका है।आईई 5 के अनुकूल होने से पहले जितना आज किया गया था उतना लागू नहीं हो सकता है, लेकिन मैं इसे स्टाइलशीट में लिखने वाली पहली चीज़ों में से एक के रूप में करता हूं। –

@Aveve यह आपको बंद कर देता है, लेकिन इसके बजाय समय-परीक्षण रीसेट शीट का उपयोग करना बेहतर है। अधिक जानकारी के लिए http://meyerweb.com/eric/tools/css/reset/ देखें - आप इसे प्यार करेंगे, मैं आपको आश्वासन देता हूं :) – Sampson

body:before { 
    content: " "; 
    width: 100%; 
    height: 100%; 
    position: fixed; 
    z-index: -1; 
    top: 0; 
    left: 0; 
    background: rgba(0, 0, 0, 0.5); 
}

स्रोत

2012-11-14 15:03:40

वहां सबसे अच्छा संभव समाधान है। आप बस शरीर के लिए "ओवरलेड" कक्षा टॉगल करते हैं और उस कक्षा नाम के साथ शरीर के ऊपर स्टाइल लागू करते हैं। –

कृपया इस उत्तर को और अधिक बताएं। मैं Sviatoslav की टिप्पणी समझ में नहीं आता। –

-6

मैंने ऊपर नाट बार के उत्तर को देखा, जिसे आप पसंद करते थे। यह सरल से बहुत अलग

html {background-color: grey}

स्रोत

2015-06-06 03:36:36

डिव ओवरले करें संपूर्ण पृष्ठ (केवल व्यूपोर्ट नहीं)?

उत्तर

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