सीएसएस: स्क्रॉलिंग के साथ 100% बढ़ाने के लिए इस ओवरले को कैसे प्राप्त करें?

यहाँ सवाल में इस मुद्दे का एक उदाहरण है:सीएसएस: स्क्रॉलिंग के साथ 100% बढ़ाने के लिए इस ओवरले को कैसे प्राप्त करें?

http://dev.madebysabotage.com/playground/overlay.html

तुम देखो पूरे पृष्ठ पर एक ग्रे ओवरले वहाँ है, लेकिन अगर आप नीचे स्क्रॉल, प्रारंभिक लोड पेज नीचे सामग्री नहीं है ओवरले

मेरे पास #overlay div है और ऐसा लगता है कि यह स्क्रॉलिंग के दौरान 100% ऊंचाई नहीं रखता है, इसलिए इसे खींचने के तरीके को समझने की कोशिश कर रहा है।

<!DOCTYPE html> 
<html lang="en"> 

<head> 
    <meta charset="utf-8"> 
    <title>CSS Overlay</title> 
    <style type="text/css"> 
    html { 
     height: 100%; 
     min-height: 100%; 
    } 
    body { 
     height: 100%; 
     min-height: 100%; 
     font-family: Georgia, sans-serif; 
    } 
    #overlay { 
     background: rgba(0,0,0,0.4); 
     width: 100%; 
     height: 100%; 
     min-height: 100%; 
     position: absolute; 
     top: 0; 
     left: 0; 
     z-index: 10000; 
    } 
    header, section, footer { 
     width: 800px; 
     margin: 0 auto 20px auto; 
     padding: 20px; 
     background: #ff0; 
    } 
    section { 
     min-height: 1500px; 
    } 
    </style> 
</head> 

<body> 
    <div id="overlay"></div> 
    <header> 
    <h1>Header</h1> 
    </header> 
    <section> 
    <p>Here's some sweet content</p> 
    </section> 
    <footer> 
    <p>Here's my footer</p> 
    </footer> 
</body> 
</html>

स्रोत

2011-01-10 Shpigford

इसके लिए धन्यवाद! किसी और के लिए पढ़ने के लिए, समस्या ऊपर दिए गए लिंक पर तय की गई है। इसे पुनर्निर्मित करने के लिए फ़ायरबग का उपयोग करें या ओवरले आईडी से 'स्थिति: तय;' को हटाने के लिए इसी तरह का उपयोग करें :) – RyanM

3yrs बाद में और मुझे एक ही समस्या है :) प्रश्न के लिए +1 – Ljubisa

131

position: fixed; ओवरले पर:

यहाँ पूर्ण स्रोत है।

स्रोत

2011-01-10 15:36:29 benhowdle89

कोई शर्म की बात नहीं है, सरल गलतियाँ मुझे कभी-कभी देखने के लिए घंटों लगती हैं !! ! – benhowdle89

आप ध्यान दें कि निश्चित स्थिति IE6 में समर्थित नहीं है। लेकिन इस तथ्य पर विचार करते हुए कि आप आरजीबीए मूल्यों का उपयोग कर रहे हैं, मुझे लगता है कि आपको आईई की परवाह नहीं है। : पी – Dan

कौन करता है? ;) (हम सभी को वास्तव में होना चाहिए) हे – benhowdle89

बदलें #overlayposition:absolute

स्रोत

2011-01-10 15:37:32 Bazzz

को position:fixed यह इसलिए होता है क्योंकि #overlayposition: absolute<html> के सापेक्ष है और यह आयाम है, जो केवल व्यूपोर्ट ऊंचाई है का उपयोग कर।

सुनिश्चित करें कि #overlay पूरे पृष्ठ के आयामों का उपयोग करता है बनाने के लिए, आप <body> पर position: relative; इस्तेमाल कर सकते हैं (लेकिन आप क्योंकि यह यह व्यूपोर्ट आकार का उपयोग करता है पर <body> पहले min-height: 100% और height: 100% हटाने की आवश्यकता होगी)। #overlay फिर <body> आयामों का उपयोग करेगा और पूरे पृष्ठ को भर देगा।

स्रोत

2015-10-14 14:09:57 Thom

सीएसएस: स्क्रॉलिंग के साथ 100% बढ़ाने के लिए इस ओवरले को कैसे प्राप्त करें?

उत्तर

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