दिलचस्प पोस्ट
"Git commit" और "git push" के बीच के अंतर क्या हैं? संदर्भ के आधार पर डेटा अद्यतन योग्य नाम (डीटी) क्यों करता है, भले ही मैं किसी अन्य चर पर असाइन करता हूं? दूसरे अर्रे के आधार पर एक अर्रे को कुंजियों से क्रमबद्ध करें? ActionBarCompat: java.lang.IllegalStateException: आपको एक थीम का उपयोग करना होगा। AppCompat PHP एक स्ट्रिंग में स्ट्रिंग की पिछली घटना को बदलें? एंड्रॉइड में एक फाइल कैसे बनाएं? पेज लोड पर कोणीय नियंत्रक फ़ंक्शन कैसे निष्पादित करें? अजगर 3.x के सुपर () जादू क्यों है? ओएसएक्स सिएरा (10.12), एल कैपिटन (10.11), योसेमाइट (10.10), मावेरिक्स (10.9), माउंटेन शेर (10.8) या ओएसएक्स शेर (10.7) पर जावा ओएचएमई कहां है? PHP / MySQL का उपयोग कर सीएसवी डेटा आयात करना PHP में सरणी में एक्सएमएल कैसे परिवर्तित करें? जावा में एरे को बदलना क्यों सरणी की प्रतियों को प्रभावित करता है? टास्क बनाम थ्रेड अंतर बाश के साथ एक तर्क सेट करना मैं किसी दिए गए निर्देशिका में फ़ाइलों पर कैसे पुनरावृत्त करूं?

चौड़ाई: 100% -पैडिंग?

मेरे पास एक html इनपुट है

इनपुट में padding: 5px 10px; मुझे यह मूल पैर की चौड़ाई का 100% होना चाहिए (जो द्रव है)।

हालांकि width: 100%; का उपयोग width: 100%; इनपुट को 100% + 20px होने का कारण बनता है मैं इसे कैसे देख सकता हूं?

उदाहरण

वेब के समाधान से एकत्रित समाधान "चौड़ाई: 100% -पैडिंग?"

अन्य उत्तर यहां पढ़ें, या इस उत्तर को पढ़ें: जब डिवाइटल की सामग्री 100% पर सेट की जाती है, तो उसमें कितनी देर होती है?

box-sizing: border-box इसे ठीक करने का एक त्वरित, आसान तरीका है:

यह सभी आधुनिक ब्राउज़रों और IE8 + में काम करेगा ।

यहां एक डेमो है: http://jsfiddle.net/thirtydot/QkmSk/301/

 .content { width: 100%; box-sizing: border-box; } 

अगर आपको आईई 7 में काम करने की आवश्यकता है, तो आप इस उत्तर के एक पुराने संशोधन को पढ़ सकते हैं।

यही कारण है कि हमारे पास सीएसएस में box-sizing है।

मैंने आपके उदाहरण को संपादित किया है, और अब यह सफारी, क्रोम, फ़ायरफ़ॉक्स, और ओपेरा में काम करता है। इसे देखें: http://jsfiddle.net/mathias/Bupr3/ मैंने जो जोड़ा था वह था:

 input { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } 

दुर्भाग्य से आईई 7 जैसे पुराने ब्राउज़र्स इस का समर्थन नहीं करते हैं। यदि आप किसी ऐसे समाधान की तलाश कर रहे हैं जो पुराने आईईएस में काम करता है, तो अन्य उत्तरों देखें।

प्रतिशत में पैडिंग का भी उपयोग करें और चौड़ाई से निकालें:

 पैडिंग: 5%;
 चौड़ाई: 90%;

आप box-sizing बिना यह कर सकते हैं और width~=99% जैसे समाधान स्पष्ट नहीं कर सकते।

Jsfiddle पर डेमो :
यहां छवि विवरण दर्ज करें

  • इनपुट के padding और border रखें
  • नकारात्मक क्षैतिज margin = border-width + horizontal padding इनपुट में जोड़ें
  • पिछले चरण से margin बराबर इनपुट के आवरण क्षैतिज padding जोड़ें

HTML मार्कअप:

 <div class="input_wrap"> <input type="text" /> </div> 

सीएसएस:

 div { padding: 6px 10px; /* equal to negative input's margin for mimic normal `div` box-sizing */ } input { width: 100%; /* force to expand to container's width */ padding: 5px 10px; border: none; margin: 0 -10px; /* negative margin = border-width + horizontal padding */ } 

सीएसएस कैल्क का उपयोग करें ()

सुपर सरल और भयानक

 input { width: -moz-calc(100% - 15px); width: -webkit-calc(100% - 15px); width: calc(100% - 15px); }​ 

जैसा कि यहां देखा गया है: विभाजित पिक्सेल की 100% से कम निर्धारित मात्रा
वेबविटीली द्वारा ( https://stackoverflow.com/users/713523/webvitaly )
मूल स्रोत: http://web-profile.com.ua/css/dev/css-width-100prc-minus-100px/

बस यहाँ इस पर प्रतिलिपि की, क्योंकि मैं लगभग अन्य धागे में इसे याद किया।

मान लें कि मैं 15px पैडिंग के साथ एक कंटेनर में हूं, यह है कि मैं हमेशा आंतरिक भाग के लिए उपयोग करता हूं:

 width:auto; right:15px; left:15px; 

वह आंतरिक भाग को उस चौड़ाई तक फैलाएगा जिससे वह 15px या तो दोनों ओर कम हो।

चियर्स

एंडी

आप कुछ पोजिशनिंग ट्रिक्स की कोशिश कर सकते हैं आप इनपुट को position: relative में एक div में रख सकते हैं position: relative और एक निश्चित ऊंचाई, तो इनपुट पर position: absolute; left: 0; right: 0; position: absolute; left: 0; right: 0; , और कोई पैडिंग आपको पसंद है

लाइव उदाहरण

यहां codeontrack.com की सिफारिश है, जिसमें अच्छे समाधान के उदाहरण हैं:

डिवा की चौड़ाई को 100% सेट करने के बजाय, इसे ऑटो पर सेट करें, और सुनिश्चित करें कि <div> प्रदर्शित करने के लिए सेट है: ब्लॉक ( <div> लिए डिफ़ॉल्ट)।

इनपुट बॉक्स को एक आवरण तत्व में पैड करना

 <style> div.outer{ background: red; padding: 10px; } div.inner { border: 1px solid #888; padding: 5px 10px; background: white; } input { width: 100%; border: none } </style> <div class="outer"> <div class="inner"> <input/> </div> </div> 

यहां उदाहरण देखें: http://jsfiddle.net/L7wYD/1/

चौड़ाई के बीच अंतर को समझें: ऑटो; और चौड़ाई: 100%; चौड़ाई: ऑटो; क्या (ऑटो) मज़बूती से पैडिंग सहित रैपिंग डिवा के साथ दिए गए सटीक फिट होने के लिए चौड़ाई की गणना करता है। चौड़ाई 100% चौड़ाई का विस्तार करती है और पैडिंग जोड़ती है I

क्या एक कंटेनर में लपेटकर के बारे में कंटेनर की तरह स्टाइल शैली है:

 { width:100%; border: 10px solid transparent; } 

इसे इस्तेमाल करे:

 width: 100%; box-sizing: border-box; 

मेरी भी यही समस्या थी। इसे ठीक करें:

 width: 100%; padding: 5px; /*--------------Now remove from padding what you've added---------------*/ margin:-5px; 

चियर्स

तुम यह केर सकते हो:

 width: auto; padding: 20px;