सीएसएस में पृष्ठ की पूरी ऊंचाई के साथ div कैसे भरें? (पेज 100% से लंबा है) AJAX लोडिंग gif पृष्ठभूमि

Question

ठीक है, ऐसे कई समान प्रश्न हैं लेकिन मुझे कुछ भी नहीं चाहिए।

मेरे पास पृष्ठ पर कुछ AJAX अनुरोध हैं और मैं स्क्रीन के केंद्र में छवि दिखाना चाहता हूं, और यह सब ठीक काम कर रहा है।

इसे और अधिक प्रमुख बनाने के लिए, मैं उस छवि को पारदर्शी पृष्ठभूमि वाले div पर रखना चाहता था, इसलिए अंतिम उपयोगकर्ताओं के लिए यह अधिक स्पष्ट है। मुश्किल हिस्सा यहां से शुरू होता है।

मैं इस तरह सीएसएस के साथ div बनाया:

.divLoadingBackground 
    { 
     filter: Alpha(Opacity=40); -moz-opacity:0.4; opacity: 0.4; 
     width: 100%; 
     height: 100%; 
     background-color: #333; 
     position: fixed; 
     top: 0px; 
     left: 0px; 
    } 

यह ठीक ऊपर पेज भरता है, या, मैं कहना चाहिए, इस व्यूपोर्ट भर जाता है। यदि मैं पृष्ठ को नीचे स्क्रॉल करता हूं, तो पृष्ठ फिर से सामान्य होता है। मैं चाहता हूं कि यह div पृष्ठ के पूरे लेंस को फैलाए, इससे कोई फर्क नहीं पड़ता कि पृष्ठ कितना समय है।

यहाँ समस्या का एक उदाहरण mockup मैं जल्दी से प्रदर्शित करने के लिए किया जाता है:

आप देख सकते हैं, मैं mockup के लिए एसओ का उदाहरण लिया;) छवि 1 इसके ठीक पता चलता है कि जब ऐसा लगता है। छवि 2 दिखाता है कि यह स्क्रॉल पर पृष्ठ के साथ चला जाता है। मैं एक सी # डेवलपर हूं और सीएसएस प्राचीन लैटिन के रूप में मेरे लिए विदेशी है।

इस divLoadingBackground div को पृष्ठ की पूरी लंबाई भरने के लिए कैसे करें?

किसी भी मदद के लिए बहुत धन्यवाद। यदि आपको कोई अतिरिक्त जानकारी चाहिए, तो कृपया टिप्पणी करें!

Answer 1

एक चीज जो मैं आपके सीएसएस में नहीं देखता वह जेड-इंडेक्स है। फिक्स्ड, हालांकि, इस समस्या को हल करता है, कभी-कभी, अन्य divs कैसे स्थित हैं, इस पर आधारित है, आपका divLoadingBackground div divs में से एक में समाप्त हो सकता है।

z-index: 9999; 

या कुछ इसी तरह जोड़ने और देखें कि क्या यह काम करता है की कोशिश।

Answer 2

मुझे विश्वास है कि आपको एक बार प्रस्तुत किए गए पृष्ठ की ऊंचाई पर प्रश्न में div की ऊंचाई को गतिशील रूप से सेट करने के लिए जावास्क्रिप्ट/jQuery की आवश्यकता होगी।

और यदि आप वेब की दुनिया में प्रवेश कर रहे हैं, तो यह सीखने का समय है कि नई भाषा "सीएसएस" के साथ-साथ पेप्पास-काफी-जैसी-चुनौतीपूर्ण जावास्क्रिप्ट नहीं है।

Answer 3

जब मुझे कुछ साल पहले ऐसी कार्यक्षमता की आवश्यकता थी, तो मैंने जांच की कि Google Calendar ने यह कैसे किया।

असल में, वे एक टाइमर-संचालित जावास्क्रिप्ट फ़ाइल का उपयोग करते हैं जो खिड़की की ऊंचाई के लिए जांचता है और तदनुसार एक निहित डीआईवी टैग की ऊंचाई समायोजित करता है (या एक आईएफआरएएम टैग, केवल आपके पास कोई कंटेनर टैग)।

यहाँ एक पृष्ठ से एक कोड का टुकड़ा मैं पर काम किया है:

<script type="text/javascript"> 
    document.getElementsByTagName("body")[0].style.height = "100%"; 
    document.getElementsByTagName("html")[0].style.height = "100%"; 
    document.getElementsByTagName("body")[0].style.minHeight = "100%"; 
    document.getElementsByTagName("html")[0].style.minHeight = "100%"; 

    function height() 
    { 
     try 
     { 
      height_iframe(); 
     } 
     catch(err) 
     { 
     } 
    } 
    window.onload=height; 

    // -- 

    var ie6WorkaroundIFrameResize = 1; 

    function height_iframe() 
    { 
     var any = false; 
     var offset = 300; 
     var c = document.getElementById("iframecontent"); 

     if (c!=null) 
     { 
      c.style.height = (GetClientHeight()-offset)+"px"; 
      any = true; 

      var d = document.getElementById("iframeie6"); 
      if (d!=null) 
      { 
       d.style.height = (GetClientHeight()-(offset+ie6WorkaroundIFrameResize))+"px"; 
       any = true; 

       ie6WorkaroundIFrameResize = 0; 
      } 
     } 

     if (any) 
     {                    
      setTimeout('height_iframe()', 300); 
     } 
    } 

    function GetClientHeight() 
    { 
     return document.documentElement.clientHeight; 
    } 
</script> 

असल में, स्क्रिप्ट नियमित रूप से GetClientHeight() समारोह के माध्यम से खिड़की की ऊंचाई के लिए जाँच करता है और चिंता में तत्व समायोजित कर देता है ("iframecontent") तदनुसार।

मैं निश्चित-ऊंचाई शीर्षलेखों और पाद लेखों के कुछ ऑफसेट घटाता हूं।

Answer 4

AFAIK आपको जावास्क्रिप्ट के माध्यम से इस div का आकार सेट करने की आवश्यकता होगी। मैं, jQuery का उपयोग कर की सिफारिश करेंगे इस तरह से:

//$(document).height() gives the size of the document 
//(as opposed to $(window).height() that would give the size of the viewport 
$("div#overlay").css('height',$(document).height()); 

Answer 5

एक टिप्पणी में यह डाल दिया है सकते हैं, लेकिन ऐसा लगता है मैं बहुत कम प्रतिनिधि टिप्पणी करने के लिए किया है।

डीओएम पेड़ में स्थित .divLoadingBackground div कहां है? चूंकि इसकी स्थिति तय है, इसलिए इसे पृष्ठ से स्क्रॉल नहीं करना चाहिए। यह मुझे विश्वास दिलाता है कि तत्व बहुत गहराई से घोंसला है। इसे पृष्ठ के बॉडी लेवल में डालने का प्रयास करें और देखें कि क्या इससे मदद मिलती है।

इसके अलावा, क्या आप सुनिश्चित हैं कि कुछ अन्य सीएसएस निर्देश स्थिति या विशेषता को पूर्ण या कुछ में बदल नहीं रहे हैं?

इसके अलावा, सही DOCTYPE का उपयोग करना सुनिश्चित करें। इसका निश्चित स्थिति तत्वों पर कुछ प्रभाव पड़ता है।

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

ओह, और संभोग, निश्चित स्थिति आईई 6 और नीचे समर्थित नहीं है।