如何在CSS中存在填充时使TextArea 100％宽度没有溢出？
我有下面的CSS和HTML代码片段正在呈现。
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>
问题是，文本区域结束了8px的宽度（2px的边界+6px的填充）比父。 有没有办法继续使用边框和填充，但限制了textarea的总大小到父宽度？
为什么不？ 忘记黑客，只是用CSS做？
我经常使用的一个：
.boxsizingBorder { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
请参阅浏览器支持。
许多CSS格式问题的答案似乎是“添加另一个<div>！”
所以，本着这种精神，你有没有尝试添加一个封装div来应用border / padding，然后把100％宽度的textarea放在里面？ 像（未经testing的）：
textarea { width:100%; } .textwrapper { border:1px solid #999999; margin:5px 0; padding:3px; }
<div style="display: block;" id="rulesformitem" class="formitem"> <label for="rules" id="ruleslabel">Rules:</label> <div class="textwrapper"><textarea cols="2" rows="10" id="rules"/></div> </div>
让我们考虑渲染给我们想要实现的用户的最终输出 ：一个带有边框和填充的填充文本区域，这些特征是点击它们将焦点传递给我们的textarea，以及自动100％宽度的优点典型的块元素。
我认为最好的方法是尽可能使用低级别的解决scheme，以达到最大的浏览器支持。 在这种情况下，唯一的HTML可以正常工作，避免使用JavaScript（无论如何我们都喜欢）。
LABEL标签来帮助我们，因为有这样的行为，并允许包含它必须解决的input元素。 它的默认样式是内联元素之一，因此，给予标签一个块显示样式，我们可以利用自动100％宽度（包括填充和边框），而内部文本区域没有边框，没有填充和100％的宽度。
看看W3C的具体细节我们可能注意到的其他优点是：
- 不需要“for”属性：当LABEL标签包含目标input时，点击时自动对子input进行聚焦;
- 如果已经devise了textarea的外部标签，则不会发生冲突，因为给定的input可能有一个或多个标签。
有关更多详细信息，请参阅W3C细节。
简单的例子：
<html> <head> <style type="text/css"> .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; } </style> </head>
<html> <head> <style type="text/css"> .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; } </style> </head>
<BODY>
<div class =“container”>
我是容器
<label class =“textareaContainer”>
<textarea name =“text”>我是一个带边框的填充textarea … </ textarea>
</标签>
</ DIV>
</ BODY>
</ HTML>
.textareaContainer元素的填充和边框是我们要给textarea的元素。 尝试编辑它们以便按照您的需要进行设置。 我向.textareaContainer元素提供了大而可见的填充和边框，以便您可以在单击时看到它们的行为。
如果你对填充的宽度不太感兴趣的话，这个解决scheme实际上会保持百分比的填充。
textarea { border:1px solid #999999; width:98%; margin:5px 0; padding:1%; }
不完美，但你会得到一些填充和宽度加起来100％，所以它都很好
我在这里遇到了另一个非常简单的解决scheme：在textarea的容器中添加填充。 这样可以避免textarea上的边距，边框和填充，从而避免了Beck指出围绕textarea放置的焦点和焦点的问题。
容器的填充权应该是textarea两边的有效边距，边框和填充的总和，加上可能为容器填充的任何填充。 因此，对于原来的问题：
textarea{ border:1px solid #999999; width:100%; margin:5px 0; padding:3px; } .textareacontainer{ padding-right: 8px; /* 1 + 3 + 3 + 1 */ }
<div class="textareacontainer"> <textarea></textarea> </div>
这个代码适用于IE8和Firefox
<td> <textarea style="width:100%" rows=3 name="abc">Modify width:% accordingly</textarea> </td>
您可以使用box-sizing属性，它支持所有主要的标准兼容浏览器和IE8 +。 尽pipe如此，你仍然需要一个IE7的解决方法。 在这里阅读更多。
不，你不能用CSS做到这一点。 这就是微软最初引入另外一个，也许更实用的盒子模型的原因 。 最终获胜的盒子模型，使得百分比和单位的混合变得不切实际。
我不认为你可以用父母的百分比表示填充和边框宽度。
使用框大小属性 ：
-moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box;
这将有所帮助
我经常用calc()修复这个问题。 你只给textarea 100％的宽度和一定数量的填充，但是你必须减去你给textarea的100％宽度的左右填充总数：
textarea { border: 0px; width: calc(100% -10px); padding: 5px; }
或者，如果你想给textarea一个边框：
textarea { border: 1px; width: calc(100% -12px); /* plus the total left and right border */ padding: 5px; }
负利润率如何？
textarea { border:1px solid #999999; width:100%; margin:5px -4px; /* 4px = border+padding on one side */ padding:3px; }
如果你像这样填充和抵消它：
textarea { border:1px solid #999999; width:100%; padding: 7px 0 7px 7px; position:relative; left:-8px; /* 1px border, too */ }
textarea的右侧与容器的右侧完全alignment， 并且 textarea内的文本与容器中的正文文本完全alignment…并且textarea的左侧“伸出”了一下。 有时更漂亮
对于使用Bootstrap的人来说，textarea.form-control也会导致textarea大小问题。 Chrome和Firefox似乎使用以下Bootstrap CSS使用不同的高度：
textarea.form-conrtol{ height:auto; }
