एक क्षैतिज पट्टी कैसे बनाएं जो स्क्रीन पर फैली हुई है लेकिन शरीर टैग में नहीं है?

Question

बहुत बुनियादी सवाल!

मेरे पास एक पृष्ठभूमि पैटर्न है जो पूरे शरीर टैग में खुद को दोहराता है। मैं x अक्ष पर दोहराने के लिए एक शीर्ष बार और नीचे बार (सिर/पाद लेख) भी पसंद करूंगा - पृष्ठभूमि के लिए ठोस रंग, पैटर्न और ठोस रंग की एक अच्छी सैंडविच शैली बनाना।

यह कैसे पूरा किया जा सकता?

सलाखों को 100% चौड़ाई होने की आवश्यकता है - यही कारण है कि यह सामग्री रैपर या हेडर/फ़ूटर div के माध्यम से नहीं किया जा रहा है क्योंकि वे 1000px चौड़े पर सेट हैं। कलर बार पूरी स्क्रीन पर जाना चाहिए।

Answer 1

आप को:

• सुनिश्चित करें कि आप है html, body { margin: 0; padding: 0 }
• अपने "सामग्री आवरण" की #headerBar और #footerBar बाहर जोड़ें।

कुछ इस तरह: http://jsfiddle.net/GDDA5/

html, body { 
    margin: 0; 
    padding: 0 
} 
#contentWrapper { 
    width: 300px; 
    margin: 0 auto; 
    background: #ccc; 
    height: 100px 
} 
#headerBar { 
    height: 40px; 
    background: blue 
} 
#footerBar { 
    height: 40px; 
    background: red 
} 

या आप व्यूपोर्ट में छड़ी और सामग्री के पीछे होने के लिए सलाखों करना चाहते हैं: http://jsfiddle.net/GDDA5/3/

Answer 2

मैं यहाँ समता स्थापित करने में देर हो रही है, लेकिन सीएसएस 3 का प्रयोग करें!

#selector:after { content: '|' } 

Answer 3

आप सामग्री आवरण div से बाहर पाद लेख div लेना चाहिए, तो यह शरीर चौड़ाई आयामों स्वचालित रूप से लेना चाहिए, आप प्रभाव आप देख रहे हैं दे रही है।