当CSS中存在填充时，如何使TextArea的宽度达到100％而不会溢出？ [英] How can I make a TextArea 100% width without overflowing when padding is present in CSS?

问题描述

我有以下CSS和HTML片段被呈现。

  textarea {border：1px solid＃999999; width：100％; margin：5px 0; padding：3px;}  

 < div style = ：block; id =rulesformitemclass =formitem> < label for =rulesid =ruleslabel>规则：< / label> < textarea cols =2rows =10id =rules/>< / div>   textarea 的总大小到父的宽度？
解决方案
为什么不呢？ 
 
 
 
一个我经常使用：
  .boxsizingBorder {
 -webkit-box-sizing：border-box; 
 -moz-box-sizing：border-box; 
 box-sizing：border-box; 
} 
  
查看浏览器支持此处。
 
I have the following CSS and HTML snippet being rendered.



textarea
{
  border:1px solid #999999;
  width:100%;
  margin:5px 0;
  padding:3px;
}

<div style="display: block;" id="rulesformitem" class="formitem">
  <label for="rules" id="ruleslabel">Rules:</label>
  <textarea cols="2" rows="10" id="rules"/>
</div>





Is the problem is that the text area ends up being 8px wider (2px for border + 6px for padding) than the parent.  Is there a way to continue to use border and padding but constrain the total size of the textarea to the width of the parent?
解决方案
Why not? Forget the hacks and just do it with CSS?

One I use frequently:
.boxsizingBorder {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}
See browser support here.

                        
这篇关于当CSS中存在填充时，如何使TextArea的宽度达到100％而不会溢出？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！