当CSS中存在填充时,如何使TextArea 100%宽度而不会溢出？

  Rules:
  </div></pre>
<p>
<p>
<p></p>

<p>问题是文本区域最终比父级宽8px(边框为2px,填充为6px).有没有办法继续使用边框和填充,但约束<code>textarea</code>父的宽度的总大小？</p><br><br><b>1> Piet Bijl..：</b><hr><p>为什么不？忘记黑客,只是用CSS做？</p>

<p>我经常使用一个:</p>

<pre class="lang-css prettyprint-override"><code>.boxsizingBorder {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}
</pre>

<p>请参阅浏览器支持在这里.</p></p>
        <hr>请注意,您仍然希望将宽度:100%与边框一起使用. <hr>我无法相信这有效.但确实如此.CSS从未如此简单.:-) <hr>旧版本的Internet Explorer是否仅使用边框行为？ <hr>有人可以解释一下,这堂课去哪了？textarea周围的div？ <br><br><b>2> Dave Sherohm..：</b><hr><p>许多CSS格式问题的答案似乎是"添加另一个<div>!"</p>

<p>那么,在这种精神中,您是否尝试添加应用了边框/填充的包装div,然后将100%宽度的textarea放入其中？像(未经测试)的东西:</p>

<p></p><p class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<p class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>textarea
{
  width:100%;
}
.textwrapper
{
  border:1px solid #999999;
  margin:5px 0;
  padding:3px;
}</pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code><div  id="rulesformitem" class="formitem">
  <label for="rules" id="ruleslabel">Rules:</label>
  <div class="textwrapper"><textarea cols="2" rows="10" id="rules"/></div>
</div></pre>
<br><br><b>3> 小智..：</b><hr><p>让我们考虑<em>向用户呈现</em>我们想要实现的<em>最终输出</em>:带有边框和填充的填充文本区域,这些特征是被点击它们将焦点传递给我们的textarea,以及自动100%宽度的优势典型的块元素.</p>

<p>我认为最好的方法是尽可能使用低级解决方案,以达到最大的浏览器支持.在这种情况下,唯一的HTML可以正常工作,避免使用Javascript(无论如何我们都喜欢).</p>

<p>LABEL标记在我们的帮助中,因为有这样的行为,并允许包含它必须解决的输入元素.它的默认样式是内联元素之一,因此,为标签提供块显示样式,我们可以利用自动100%宽度(包括填充和边框),而内部文本区域没有边框,没有填充和100%宽度.</p>

<p>看一下W3C的细节我们可能会注意到的其他优点是:</p>

<p>
<p>不需要"for"属性:当LABEL标记包含目标输入时,它会在单击时自动聚焦子输入;</p>
<p>如果已经设计了textarea的外部标签,则不会发生冲突,因为给定的输入可能有一个或多个标签.</p>
<p>

<p>有关更多详细信息,请参阅W3C细节.</p>

<p>简单的例子:</p>

<p></p><pre class="snippet-code-css lang-css prettyprint-override"><code>.container { 
  width: 400px; 
  border: 3px 
  solid #f7c; 
  }
.textareaContainer {
	display: block;
	border: 3px solid #38c;
	padding: 10px;
  }
textarea { 
  width: 100%; 
  margin: 0; 
  padding: 0; 
  border-width: 0; 
  }</pre><p></p>

<p>.textareaContainer元素的填充和边框是我们想要给textarea的元素.尝试编辑它们以根据需要设置样式.我为.textareaContainer元素提供了大而可见的填充和边框,让您在单击时看到它们的行为.</p></p>
        <br><br><b>4> qui..：</b><hr><p>如果你对填充的宽度不太感兴趣,这个解决方案实际上也会保持填充百分比.</p>

<pre class="brush:bash;">textarea
{
    border:1px solid #999999;
    width:98%;
    margin:5px 0;
    padding:1%;
}
</pre>

<p>不完美,但你会得到一些填充,宽度加起来100%所以这一切都很好</p></p>
        <br><br><b>5> 小智..：</b><hr><p>我在这里遇到了另一个非常简单的解决方案:在textarea的容器中添加padding-right.这样可以保留textarea上的边距,边框和填充,从而避免了Beck指出的关于chrome和safari放在textarea周围的焦点突出显示的问题.</p>

<p>容器的填充权应该是textarea两侧的有效边距,边框和填充的总和,以及您可能需要的容器填充.因此,对于原始问题中的情况:</p>

<pre class="brush:bash;">textarea{
    border:1px solid #999999;
    width:100%;
    margin:5px 0;
    padding:3px;
}
.textareacontainer{
    padding-right: 8px; /* 1 + 3 + 3 + 1 */
}
</pre>

<p>

</p><pre class="brush:bash;"><div class="textareacontainer">
    <textarea>

    Modify width:% accordingly