आंतरिक div की 100% चौड़ाई सीमा से अधिक

Question

मुझे पता है कि यह एक सामान्य समस्या हो सकती है लेकिन मुझे इस वेबसाइट और न ही अन्य में कोई समाधान नहीं मिला है।

मैं इस बेला बनाया: http://jsfiddle.net/xzdead/jxsYx/3/

इनर div 'div_mainPanel' है 100% चौड़ाई, लेकिन अगर आप सही-नीचे कोने में देखो यह माता पिता div खत्म हो गया।

मैंने चौड़ाई को हटाने की कोशिश की है: 100 आंतरिक div और चौड़ाई की समस्या हल हो गई है लेकिन ऊंचाई नहीं है। वैसे भी अगर मैं 100% तक कमांड सेट करता हूं और मार्जिन-पैडिंग 0px पर सेट होता है तो यह पैरेंट div से क्यों बढ़ता है?

अग्रिम

Answer 1

सीमाओं की गणना के लिए सीमाएं गिनती हैं। आपका आंतरिक div माता-पिता की ऊंचाई/चौड़ाई का 100% उठाता है, इसलिए यह 500x300 बन जाता है, लेकिन फिर सीमा के लिए चारों ओर 2px जोड़ता है, इसलिए यह वास्तव में 502x302 है और दाएं/नीचे किनारों पर माता-पिता की सीमा पर लीक होता है।

Answer 2

thats धन्यवाद क्योंकि सीमा विशेषता से अधिक 100% ... गद्दी मूल्य के रूप में ही चला जाता है।

यही कारण है कि इसकी 2 पीएक्स आउट।

Answer 3

यह सही व्यवहार है। आंतरिक div माता-पिता की 100% चौड़ाई पर सेट होता है, लेकिन इसमें सीमा शामिल नहीं होती है, इसलिए यह 100% + 2px है।

माता पिता की सीमा के बाहर प्रदर्शित किया जा रहा आंतरिक div रोकने के लिए, दोनों माता पिता और बच्चे के लिए box-sizing: border-box जोड़ें:

#div_mainContainer { 
 
    width: 500px; 
 
    height: 300px; 
 
    background-color: #f8f8f8; 
 
    border: 1px solid red; 
 
    margin: 0px; 
 
    padding: 0px; 
 
    box-sizing: border-box; 
 
} 
 

 
#div_mainPanel { 
 
    width: 100%; 
 
    height: 100%; 
 
    margin: 0px; 
 
    border: 1px solid yellow; 
 
    box-sizing: border-box; 
 
}

<div id="div_mainContainer"> 
 
    <div id="div_mainPanel"></div> 
 
</div>

Answer 4

सीमा संपत्ति चौड़ाई में गणना नहीं कर रहा है बॉक्स के या तो। तो वास्तव में सीमा के लिए आपके बॉक्स को 100% + 2 पीएक्स के रूप में गणना की जा रही है। चौड़ाई के लिए, बस width: 100% एक प्रभाग (ब्लॉक स्तर तत्व) पहले से ही स्वचालित रूप से कंटेनर की चौड़ाई, एक 100% चौड़ाई कर सकते हैं (क्योंकि यह पैडिंग, बॉर्डर, और मार्जिन पर विचार करेंगे) की तुलना में बेहतर भरने के लिए विस्तार होगा क्योंकि हटा दें।

यदि आप हमेशा मूल कंटेनर पर सटीक ऊंचाई का उपयोग कर रहे हैं, तो बच्चे पर केवल 498 पीएक्स की सटीक ऊंचाई का उपयोग न करें, जो कि बच्चे के लिए 500px की कुल ऊंचाई की गणना करेगा।

Answer 5

अब इस समस्या को हल करने के लिए एक बेहतर तरीका है: अपने सीएसएस के लिए आकार border-box का उपयोग करें:

http://paulirish.com/2012/box-sizing-border-box-ftw/

अब 100% बच्चे तत्वों के आकार निर्धारित करने के लिए एक और अधिक प्राकृतिक तरीके से किया जाएगा।