चौड़ाई: स्थिति के साथ 100%: निरपेक्ष (सीएसएस)

Question

यदि आप करते हैं:

<div style="width:auto;background:red;color:white">test</div> 

आप एक div कि पूरे स्क्रीन चौड़ाई (100%) को भरने के लिए बढ़ाया गया है मिलता है।

यही मुझे होने की ज़रूरत है।

हालांकि, मुझे सेट करने की शुरुआती स्थिति भी चाहिए .. इसलिए मुझे स्थिति चाहिए: पूर्ण।

जब मैं स्थिति जोड़ता हूं: पूर्ण, div की चौड़ाई केवल सामग्री के रूप में व्यापक है .. (फ्लोट के समान)। क्या इसके आसपास कोई रास्ता है?

मैं बस निर्दिष्ट नहीं कर सकते चौड़ाई: इस के बाद से 100% में सीमा आकार, आदि खाते में नहीं ले करता है ..

धन्यवाद, वेस्ले

Answer 1

जब मैं स्थिति जोड़ता हूं: पूर्ण, div की चौड़ाई केवल सामग्री के भीतर ही विस्तृत होती है .. (फ्लोट के समान)। क्या के आसपास कोई रास्ता है? आप position:absolute; left:0; right:0; top:0 इस्तेमाल कर सकते हैं के बाद से इस में खाता सीमा आकार, आदि के लिए नहीं ले करता है 100% ..

:

मैं बस चौड़ाई निर्दिष्ट नहीं कर सकते।

इस तरह

: http://jsfiddle.net/thirtydot/yQWGV/

Answer 2

आप चौड़ाई का उपयोग कर सकते हैं: 100% और सीएसएस विशेषता बॉक्स आकार बदलने, बॉक्स मॉडल को आईई 5.5 जैसे काम करने के लिए, यानी पैडिंग और सीमा चौड़ाई में गिना जाता है। , http://jsfiddle.net/dJtm2/

सावधान रहें, हालांकि के रूप में यह एक अपेक्षाकृत नए CSS3 विशेषता है और केवल नए ब्राउज़रों में काम करेंगे, और जैसा कि तुम मेरे उदाहरण से देख सकते हैं भयानक प्रतिकूल उपाय की आवश्यकता है:

div.absolute { 
    width: 100%; 
    border: 5px solid #000; 
    background-color: #F00; 
    position: absolute; top: 100px; 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    padding: 50px; 
} 

यहाँ एक बेला है वह विक्रेता उपसर्ग है।

Answer 3

बस इस प्रकार लिख:

div.absolute { 
    border: 5px solid #000; 
    background-color: #F00; 
    position: absolute; 
    top: 100px; 
    padding: 50px; 
    left:0; 
    right:0; 
} 

http://jsfiddle.net/dJtm2/1/

इस padding & border में

तत्व की चौड़ाई में वृद्धि नहीं।