当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>问题是文本区域最终比父区域宽8像素（边框2像素+填充6像素）。有没有办法继续使用边框和填充，但将的总大小限制textarea为父级的宽度？
第2272篇《当CSS中存在填充时，如何使TextArea的宽度为100％而不会溢出？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点
负利润率如何？
textarea {
border:1px solid #999999;
width:100%;
margin:5px -4px; /* 4px = border+padding on one side */
padding:3px;
}
我经常用解决这个问题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%;
padding: 7px 0 7px 7px;
position:relative; left:-8px; /* 1px border, too */
}
textarea的右侧与容器的右侧完全对齐，并且 textarea的完美对齐在容器中的正文中的文本......和textarea的左侧“伸出”了一下。有时更漂亮。
对于使用Bootstrap的人，textarea.form-control也可能导致textarea大小调整问题。Chrome和Firefox在以下Bootstrap CSS中使用的高度不同：
textarea.form-conrtol{
height:auto;
}
不，您不能使用CSS做到这一点。这就是Microsoft最初引入另一种甚至更实用的Box模型的原因。最终获胜的盒子模型使得混合百分比和单位不切实际。
我认为也不能以父级的百分比表示填充和边框宽度。
我一直在寻找内联样式的解决方案，而不是CSS解决方案，这是我可以为响应文本区域做的最好的事情：
<div style="width: 100%; max-width: 500px;">
<textarea style="width: 100%;"></textarea>
</div>
您可以使用box-sizing属性，所有主要的符合标准的浏览器和IE8 +都支持该属性。不过，您仍然需要针对IE7的解决方法。在这里阅读更多。
我在这里遇到了另一个非常简单的解决方案：在textarea的容器中添加padding-right。这样可以在文本区域上保留边距，边框和填充，从而避免了贝克指出的问题，即铬和野生动物园围绕文本区域放置的焦点高光。
容器的padding-right应该是textarea两侧有效边距，边框和padding的总和，再加上您可能希望容器使用的padding的总和。因此，对于原始问题的情况：
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>
让我们考虑一下向用户呈现的最终输出结果：带边框和填充的填充文本区域，其特征是单击它们会将焦点传递到我们的文本区域，以及自动100％宽度的优势典型的块元素。
我认为最好的方法是尽可能使用低级解决方案，以达到最大的浏览器支持。在这种情况下，只有HTML可以正常工作，避免使用Javascript（无论如何我们都喜欢）。
LABEL标记会出现在我们的帮助中，因为它具有这种行为，并且允许包含它必须处理的输入元素。它的默认样式是内联元素之一，因此，为标签提供块显示样式，我们可以利用自动100％宽度（包括填充和边框），而内部textarea没有边框，没有填充和100％宽度。
看一下W3C的特定细节，我们可能会注意到的其他优点是：
有关更多详细信息，请参见W3C详细信息。
简单的例子：
.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;
}<body>
<div class="container">
I am the container
<label class="textareaContainer">
<textarea name="text">I am the padded textarea with a styled border...</textarea>
</label>
</div>
</body>.textareaContainer元素的填充和边框是我们要赋予文本区域的元素。尝试编辑它们以根据需要设置样式。我为.textareaContainer元素提供了较大且可见的填充和边框，以使您可以查看单击它们时的行为。
如果您不太担心填充的宽度，则此解决方案实际上也会将填充保持为百分比。
textarea
{
border:1px solid #999999;
width:98%;
margin:5px 0;
padding:1%;
}
并不完美，但是您会得到一些填充，宽度加起来达到100％，所以一切都很好
许多CSS格式问题的答案似乎是“添加另一个<div>！”。
因此，本着这种精神，您是否尝试过添加一个应用了边框/填充的wrapper div，然后将其宽度为100％的textarea放入其中？像（未经测试的）：
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>为什么不忘了这些技巧，而只使用CSS？
我经常使用的一种：
.boxsizingBorder {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
在此处查看浏览器支持。
相似问题
问题类别