Html 当 CSS 中存在填充时，如何使 TextArea 100% 宽度而不溢出？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/271067/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I make a TextArea 100% width without overflowing when padding is present in CSS?
提问by Eric Schoonover
I have the following CSS and HTML snippet being rendered.
我正在呈现以下 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>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 textareato the width of the parent?
问题是文本区域最终比父区域宽 8px（边框为 2px + 填充为 6px）。有没有办法继续使用边框和填充但将总大小限制textarea为父级的宽度？
回答by Piet Bijl
回答by Dave Sherohman
The answer to many CSS formatting problems seems to be "add another <div>!"
许多 CSS 格式问题的答案似乎是“添加另一个 <div>！”
So, in that spirit, have you tried adding a wrapper div to which the border/padding are applied and then putting the 100% width textarea inside of that? Something like (untested):
那么，本着这种精神，您是否尝试过添加一个应用了边框/填充的包装 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>回答by Emanuele Del Grande
let's consider the final output rendered to the userof what we want to achieve: a padded textarea with both a border and a padding, which characteristics are that being clicked they pass the focus to our textarea, and the advantage of an automatic 100% width typical of block elements.
让我们考虑呈现给用户的最终输出我们想要实现的目标：带有边框和填充的填充 textarea，其特征是单击它们会将焦点传递给我们的 textarea，以及自动 100% 宽度的优势典型的块元素。
The best approach in my opinion is to use low level solutions as far as possible, to reach the maximum browsers support. In this case the only HTML could work fine, avoiding the use of Javascript (which anyhow we all love).
我认为最好的方法是尽可能使用低级解决方案，以达到最大的浏览器支持。在这种情况下，唯一的 HTML 可以正常工作，避免使用 Javascript（无论如何我们都喜欢）。
The LABEL tag comes in our help because has such behaviour and is allowed to contain the input elements it must address to. Its default style is the one of inline elements, so, giving to the label a block display style we can avail ourselves of the automatic 100% width including padding and borders, while the inner textarea has no border, no padding and a 100% width.
LABEL 标签出现在我们的帮助中，因为它有这样的行为，并且允许包含它必须寻址的输入元素。它的默认样式是内联元素之一，因此，给标签一个块显示样式，我们可以利用自动 100% 宽度，包括填充和边框，而内部 textarea 没有边框，没有填充和 100% 宽度.
Taking a look at the W3C specifics other advantages we may notice are:
看看 W3C 的细节，我们可能会注意到的其他优点是：
- no "for" attribute is needed: when a LABEL tag contains the target input, it automatically focuses the child input when clicked;
- if an external label for the textarea has already been designed, no conflicts occur, since a given input may have one or more labels.
- 不需要“for”属性：当 LABEL 标签包含目标输入时，它会在点击时自动聚焦子输入；
- 如果已经为 textarea 设计了外部标签，则不会发生冲突，因为给定的输入可能有一个或多个标签。
See W3C specificsfor more detailed information.
有关更多详细信息，请参阅W3C 规范。
Simple example:
简单的例子：
.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>The padding and border of the .textareaContainer elements are the ones we want to give to the textarea. Try editing them to style it as you want. I gave large and visible padding and borders to the .textareaContainer element to let you see their behaviour when clicked.
.textareaContainer 元素的内边距和边框是我们想要提供给 textarea 的元素。尝试编辑它们以根据需要设置样式。我为 .textareaContainer 元素提供了大而可见的填充和边框，以便您在单击时看到它们的行为。
回答by qui
If you're not too bothered about the width of the padding, this solution will actually keep the padding in percentages too..
如果您不太担心填充的宽度，此解决方案实际上也会以百分比形式保留填充..
textarea
{
border:1px solid #999999;
width:98%;
margin:5px 0;
padding:1%;
}
Not perfect, but you'll get some padding and the width adds up to 100% so its all good
不完美，但你会得到一些填充，宽度加起来为 100% 所以一切都很好
回答by Brian
I came across another solution herethat is so simple: add padding-right to the textarea's container. This keeps the margin, border, and padding on the textarea, which avoids the problem that Beck pointed out about the focus highlight that chrome and safari put around the textarea.
我在这里遇到了另一个非常简单的解决方案：将 padding-right 添加到 textarea 的容器中。这将保留 textarea 的边距、边框和填充，从而避免了 Beck 指出的关于 chrome 和 safari 在 textarea 周围放置的焦点突出显示的问题。
The container's padding-right should be the sum of the effective margin, border, and padding on both sides of the textarea, plus any padding you may otherwise want for the container. So, for the case in the original question:
容器的 padding-right 应该是 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>
回答by Jeff Guest
This code works for me with IE8 and Firefox
此代码适用于 IE8 和 Firefox
<td>
<textarea style="width:100%" rows=3 name="abc">Modify width:% accordingly</textarea>
</td>
回答by jzfgo
回答by buti-oxa
No, you cannot do that with CSS. That is the reason Microsoft initially introduced another, and maybe more practical box model. The box model that eventually won, makes it inpractical to mix percentages and units.
不，你不能用 CSS 做到这一点。这就是微软最初推出另一个可能更实用的盒子模型的原因。最终获胜的盒子模型使得混合百分比和单位变得不切实际。
I don't think it is OK with you to express padding and border widths in percentage of the parent too.
我不认为你也可以用父元素的百分比来表达填充和边框宽度。
回答by Jee Mok
I was looking for an inline-styling solution instead of CSS solution, and this is the best I can go for a responsive textarea:
我一直在寻找内联样式解决方案而不是 CSS 解决方案，这是我可以选择的响应式文本区域的最佳解决方案：
<div style="width: 100%; max-width: 500px;">
<textarea style="width: 100%;"></textarea>
</div>
回答by commonpike
If you pad and offset it like this:
如果你像这样填充和抵消它：
textarea
{
border:1px solid #999999;
width:100%;
padding: 7px 0 7px 7px;
position:relative; left:-8px; /* 1px border, too */
}
the right side of the textarea perfectly aligns with the right side of the container, andthe text inside the textarea aligns perfectly with the body text in the container... and the left side of the textarea 'sticks out' a bit. it's sometimes prettier.
textarea的右侧与容器的右侧完全对齐，并且textarea的完美对齐在容器中的正文中的文本......和textarea的左侧“伸出”了一下。它有时更漂亮。
