100% चौड़ाई HTML तत्व समस्या

Question

कुछ HTML तत्वों (एक फॉर्म इनपुट की तरह) असाइन करते समय 100% चौड़ाई - अब आप चौड़ाई को प्रभावित करने वाली कोई अतिरिक्त शैलियों को लागू नहीं कर सकते हैं। border या padding जैसी चीजें तत्व को 100% से अधिक होने का कारण बनेंगी। इसके परिणामस्वरूप अजीब तत्व होते हैं जो उनके मूल तत्वों के बाहर हो सकते हैं।

के बाद से सीएसएस width: 100% - 2px; का समर्थन नहीं करता एक ही रास्ता है कि मैं इस के आसपास पता एक निरपेक्ष पिक्सेल चौड़ाई (width: 98px) का उपयोग करें या 100% है जो वास्तव में एक विकल्प नहीं है पर उतर तत्व काट रहा है।

<div style="overflow:hidden;"> 
<input style="width:100%; border: 1px solid #000;" /> 
</div> 

क्या वे इसके आसपास कोई अन्य तरीके हैं?

Answer 1

adding another div के साथ साथ, समाधान जल्द ही सीएसएस नियमों के box-sizing attribute जोड़ने के लिए सीएसएस 3 उपयोग करने के लिए किया जाएगा। यह नया CSS 3 मान IE 8 और अन्य सभी ब्राउज़रों में पहले से ही काम करता है - इसलिए यदि आपको IE 6 & 7 छोड़ने पर कोई फर्क नहीं पड़ता है तो आप इसे अभी उपयोग कर सकते हैं!

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

Answer 2

आप एक कंटेनर बना सकते हैं जो क्रोम (सीमाओं, पैडिंग) के बिना 100% है, और फिर जो भी क्रोम आप चाहते हैं उसके साथ एक ब्लॉक तत्व रखें - एक ब्लॉक तत्व डिफ़ॉल्ट रूप से कुल चौड़ाई को भर देगा।

<style> 
.container {width:100%;border:0:margin:0;} 
.thingy {border:1px solid black;margin:2px;background:#ddd;} 
</style> 

<div class="container"> 
    <div class="thingy"> 
    Both worlds? 
    </div> 
</div> 

Answer 3

यह एक पुरानी सवाल है, लेकिन यह उल्लेख है कि CSS3 के बाद से, आप calc उपयोग कर सकते हैं लायक है:

width: calc(100% - 2px);