100% चौड़ाई माता-पिता के div

से बड़ी है, मैं vBulletin विषय पर काम कर रहा हूं, लेकिन थ्रेड सूची पर, प्रत्येक धागे की चौड़ाई के लिए 100% है लेकिन धागे उनके माता-पिता से भी बड़े हैं, लेकिन जब मैं धागे की सीमा को हटा देता हूं, तो वे माता-पिता के div फिट होगा :)। तो सोचें कि यह समस्या सीमाओं पर है।100% चौड़ाई माता-पिता के div

आप देख सकते हैं कि पर बेहतर jsfiddle

<body> 
    <div class="after-body"> 
     <div class="body-wrapper"> 
      <div class="threadlist"> 
        <ol class="threads"> 
         <li class="threadbit"><div class="thread"></div></li> 
         <li class="threadbit"><div class="thread"></div></li> 
        </ol> 
      </div> 
     </div> 
    </div> 
</body>

स्रोत

2013-08-03 AmirHosein KazemNejad

समस्या यहाँ (धागा काले बॉर्डर के साथ सफेद आकार है) कि width पाठ के साथ भीतरी क्षेत्र के आकार, और सीमा के साथ गद्दी है इसके चारों ओर "लपेटा" हैं। उस विनिर्देशन का कोई मतलब नहीं है, लेकिन अधिकांश आधुनिक ब्राउज़र इसका अनुसरण करते हैं।

आपके उद्धारकर्ता को box-sizing: border-box; कहा जाता है।

.threadbit .thread { 

    /* ... some stuff ... */ 

    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ 
    -moz-box-sizing: border-box; /* Firefox, other Gecko */ 
    box-sizing: border-box;   /* Opera/IE 8+ */ 
}

यहाँ देखो: इस संपत्ति here और here पर jsFiddle

अधिक जानकारी।

स्रोत

2013-08-03 09:31:00 MightyPork

हाँ आप सही हैं, सीमाएं तत्व की "चौड़ाई" को दबा रही हैं। आधुनिक ब्राउज़र के डिफ़ॉल्ट box-sizing है।

.threadbit .thread { 
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ 
    -moz-box-sizing: border-box; /* Firefox, other Gecko */ 
    box-sizing: border-box;   /* Opera/IE 8+ */ 
}

ध्यान दें कि यह IE8 नीचे समर्थित नहीं है तो निर्भर करता है कि आप क्या कर रहे हैं और समर्थन आप चाहते हैं, तो आप एक वैकल्पिक समाधान या डिजाइन को खोजने की जरूरत हो सकता है: इस तरह एक घोषणा के साथ सबसे में संशोधित किया जा सकता।

संपादित

थोड़ा समय हो गया है मेरी मूल जवाब और ब्राउज़र समर्थन थोड़ा बदल गया है के बाद से। फ़ायरफ़ॉक्स 2 9, क्रोम 10, सफारी 5.1 और इंटरनेट एक्सप्लोरर 8 के बाद सभी समर्थन box-sizing अपरिवर्तित हालांकि विशिष्ट संस्करणों से कुछ ज्ञात मुद्दे हैं।

पूर्ण/अप-टू-डेट सूची उपलब्ध है पर caniuse.com लेकिन यहाँ कुछ लोगों को मैं साइट से महत्वपूर्ण पाया है:

IE8: पर ध्यान नहीं देता box-sizing: border-box यदि न्यूनतम/अधिकतम-चौड़ाई/ऊंचाई प्रयोग किया जाता है
IE8: min-width संपत्ति box-sizingborder-box
IE9 के लिए सेट है, भले ही content-box पर लागू होता है: जब position: absolute और या तो overflow: auto करने के लिए सेट स्क्रॉलबार की चौड़ाई तत्व की चौड़ाई से घटाया जाता है या overflow-y: scroll

IE8 और IE9 कमी, इन मुद्दों और अन्य caniuse पर सूचीबद्ध के लिए बाजार में हिस्सेदारी के रूप में भविष्य में कोई समस्या नहीं रह सकेंगे।

स्रोत

2013-08-03 09:31:12 Turnerj

Ctrl + C मास्टर के लिए एक कड़ी है, लेकिन वह एक पाठ क्षेत्र स्टाइल नहीं कर रहा है: http://css-tricks.com/box-sizing/ – MightyPork

जाहिर है के माध्यम से पी @! एक पहेली के लिए सिर्फ एक लिंक पोस्ट करने का एक बड़ा प्रशंसक नहीं है, फिर मेरे जवाब को कई बार संपादित करना। ;) प्रश्न पूछने वाले व्यक्ति के लिए अभ्यास और सीखने का कुछ तत्व होना चाहिए। – Turnerj

ओह हाँ, लेकिन यह निश्चित रूप से कॉपी किए गए स्निपेट में '.threadbit .thread' के साथ' textarea' को प्रतिस्थापित करने के लिए चोट नहीं पहुंचाएगा? – MightyPork

हमेशा याद रखें जब आपको फ़ायरफ़ॉक्स डेवलपर टूल या क्रोम के मेट्रिक्स बॉक्स से बॉक्स मॉडल के माध्यम से तत्व की चौड़ाई जांच आयाम से संबंधित समस्याएं आती हैं। इसका नित्य पालन करना एक अच्छा विचार शामिल करने के लिए

*, *:before, *:after { 
     -moz-box-sizing: border-box; 
     -webkit-box-sizing: border-box; 
     box-sizing: border-box; 
    }

इसके अलावा प्रदर्शन संपत्ति जाँच करना सुनिश्चित करें।यदि कोई तत्व इनलाइन प्रदर्शित करता है तो यह चौड़ाई नहीं लेगा, मार्जिन & पैडिंग मान नहीं होगा और यदि यह इनलाइन-ब्लॉक के रूप में प्रदर्शित होता है तो यह चौड़ाई लेता है, मार्जिन & पैडिंग।

यहाँ बॉक्स आकार संपत्ति http://www.paulirish.com/2012/box-sizing-border-box-ftw/

स्रोत

2013-08-03 09:56:57

100% चौड़ाई माता-पिता के div

उत्तर

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