मैं <html> पर एक शैली निर्धारित किया है से भी कम है:<html> चौड़ाई इसकी पृष्ठभूमि
html {
background: #ECECEC;
border: 1px solid #FFFFFF;
}
पृष्ठ की सामग्री पृष्ठ की तुलना में व्यापक है, तो क्यों सीमा बंद है, लेकिन पृष्ठभूमि जा रहा रखता है? http://jsfiddle.net/rPGyc/3
html एक उचित ब्लॉक स्तर तत्व है, बस body, p, div, आदि जैसे - यह इसलिए सभी एक ही अतिप्रवाह नियम अन्य ब्लॉक तत्वों के रूप में देखता है।
हालांकि, html की पृष्ठभूमि इसकी सीमा से पहले खून बहती है जब सामग्री इसकी चौड़ाई बहती है (या जब इसकी चौड़ाई ब्राउज़र विंडो के 100% से कम या व्यूपोर्ट से कम होती है), क्योंकि पृष्ठभूमि रंग को प्रचारित किया जाता है व्यूपोर्ट, जो html युक्त कैनवास है और इसकी सभी सामग्री प्रदान की जाती है। सीमा html तत्व का हिस्सा बनी हुई है, हालांकि, जब सामग्री बहती है तो तत्व विस्तार नहीं होता है। यह व्यवहार body पर पृष्ठभूमि को लागू करने के समान ही है, लेकिन html पर नहीं, शरीर की पृष्ठभूमि को रूट तत्व को प्रचारित करने का कारण बनता है, जैसा कि this answer में वर्णित है, जो this section of the spec को उद्धृत करता है।
Alohcinotes in a comment जवाब के नीचे के रूप में, एक ही व्यूपोर्ट में html पर लागू होता है सम्मान के साथ:
ध्यान दें कि एचटीएमएल ठीक वैसे ही व्यूपोर्ट के संबंध में बर्ताव करता है के रूप में शरीर एचटीएमएल के संबंध में व्यवहार करती है, HTML तत्व की सीमाओं से परे पृष्ठभूमि से बचने के साथ। मेरा मतलब देखने के लिए http://jsfiddle.net/GmAL4/4/ देखें।
यहाँ उपयोग कर रहा है एक छोटे से ठीक jQuery
$("html").width($(document).width());
$("html").css("border", "1px solid black");
मैं जानता हूँ कि यह लंगड़ा है कि सीएसएस अकेले ठीक काम करने के लिए नहीं लग रहे है, लेकिन कम से कम हम कर सकते हैं:
यहाँ एक बेला है कि समस्या को दिखाने है jquery के साथ वांछित परिणाम।
यहाँ बेला है: http://jsfiddle.net/rPGyc/5/
इसे रोकने के लिए एक तरीका css3 शब्द-लपेट संपत्ति का उपयोग कर रहा है। Jsfiddle here
सीधे शब्दों में जोड़ें:
html{
background-color: lightgrey;
border: 1px solid #fff;
padding:0px;
margin:0px;
width:100%;
height:100%;
/*The important bit*/
word-wrap: break-word;
}
अच्छा प्रश्न है! ऐसा लगता है कि '' और '
'जैसे विशेष हैं, और केवल' पृष्ठभूमि-रंग 'के लिए। उदाहरण के लिए, ग्रेडियेंट, वही कार्य नहीं करते हैं। – Ryanयहां एक समस्या है जो समस्या दिखाती है: http://jsfiddle.net/rPGyc/3/ – GregM
मैंने कभी भी इस तरह के 'एचटीएमएल' तत्व में स्टाइल जोड़ने को कभी नहीं देखा है, केवल 'बॉडी' या बेहतर अभी तक, एक 'div' बस 'शरीर' के अंदर बैठे। मुझे लगता है कि यह ऐसा 'div' होगा जो आपको वांछित प्रभाव देगा, लेकिन मुझे यकीन नहीं है कि यह आपके प्रश्न का उत्तर देगा। – cobaltduck