व्यूपोर्ट चौड़ाई पृष्ठभूमि को अपेक्षित रूप से प्रदर्शित नहीं होने के कारण

मुझे कोई समस्या है जहां पृष्ठभूमि रंग अनपेक्षित रूप से व्यवहार कर रहा है जब व्यूपोर्ट मेरे कुछ तत्वों के लिए निर्दिष्ट आकार से छोटा हो जाता है। जबकि स्क्रॉल बार सही ढंग से दिखाई देते हैं, पृष्ठभूमि वह नहीं है जो मैं अपेक्षा करता हूं। जब व्यूपोर्ट जितना बड़ा या बड़ा होता है तो पृष्ठभूमि व्यवहार के रूप में व्यवहार करती है। फ़ायरबग के साथ पेज तत्वों का निरीक्षण करते समय ऐसा लगता है कि body तत्व इसके अंदर की सामग्री के बावजूद खींच नहीं रहा है। पृष्ठभूमि इस तरह से व्यवहार करने का कारण क्या है?व्यूपोर्ट चौड़ाई पृष्ठभूमि को अपेक्षित रूप से प्रदर्शित नहीं होने के कारण

मैंने जो कुछ भी मुझे विश्वसनीय एचटीएमएल और सीएसएस होने का विश्वास किया है, लेकिन अगर मैंने कुछ छोड़ दिया है तो कृपया मुझे बताएं।

सिकुड़ व्यूपोर्ट उदाहरण Broken Example

बढ़े व्यूपोर्ट उदाहरण Working Example

सीएसएस

html 
{ 
    background: #A37C45; 
} 

body 
{ 
    background: 
     #55688A url("../images/backgrounds/ns_bg.gif") repeat-x scroll 0 0; 
} 

#container 
{ 
    width: 100%; 
} 

#header 
{ 
    width: 730px; 
    margin-left: auto; 
    margin-right: auto; 
    padding: 5px; 
    overflow: hidden; 
} 

#main 
{ 
    width: 730px; 
    margin-top: 2px; 
    margin-left: auto; 
    margin-right: auto; 
    overflow: hidden; 
} 

#footer 
{ 
    background: 
     url("../images/backgrounds/grass.png") repeat-x scroll left top; 
    clear: both; 
    width: 100%; 
    overflow: hidden; 
    padding-top: 30px; 
    margin-top: 20px; 
} 

#footercontainer 
{ 
    width: 100%; 
    background-color: #A37C45; 
    margin-top: -1px; 
} 

#footercontent 
{ 
    width: 730px; 
    margin-left: auto; 
    margin-right: auto; 
    padding-bottom: 25px; 
    overflow: hidden; 
}

एचटीएमएल

<html> 
    <body> 
    <div id="container"> 
     <div id="header"> 
     </div> 
     <div id="main"> 
     </div> 
    </div> 
    <div id="footer"> 
     <div id="footercontainer"> 
     <div id="footercontent"> 
     </div> 
     </div> 
    </div> 
    </body> 
</html>

स्रोत

2010-09-20 ahsteele

कारण आप इस व्यवहार देख रहे हैं, क्योंकि आपके width: 100% तत्वों केवल पृष्ठभूमि की राशि वे प्रस्तुत करने की आवश्यकता के रूप में व्यूपोर्ट चौड़ाई ले रहे हैं।

आप अपने body तत्व के सीएसएस में min-width declaration जोड़ कर इसे ठीक कर सकते हैं। सीधे शब्दों में सबसे बड़ा नेस्टेड तत्व की चौड़ाई के लिए सेट:

body { 
    min-width: 730px; 
    background: #55688A url("../images/backgrounds/ns_bg.gif") repeat-x scroll 0 0; 
}

स्रोत

2010-09-20 19:21:12 Pat

730px करने के लिए 10 पिक्सल जोड़ने के लिए था, लेकिन इस का उपयोग पूरी तरह से काम किया! – ahsteele

न्यूनतम-चौड़ाई IE में समर्थित नहीं है तो अभिव्यक्ति

body { 
    min-width: 730px; 
    background: #55688A url("../images/backgrounds/ns_bg.gif") repeat-x scroll 0 0; 

    /* IE Version */ 
    width:expression(document.body.clientWidth < 730 ? "728px" : "auto"); 
}

स्रोत

2011-05-31 15:49:20

मैंने यह नहीं देखा है कि यह आईई में काम नहीं करता है। क्या ऐसे विशेष संस्करण हैं जिनके बारे में मुझे अवगत होना चाहिए? – ahsteele

व्यूपोर्ट चौड़ाई पृष्ठभूमि को अपेक्षित रूप से प्रदर्शित नहीं होने के कारण

उत्तर

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