div中的文本区域宽度问题答案

【问题标题】：Textarea width issue in divdiv中的文本区域宽度问题
【发布时间】：2016-06-09 13:48:43
【问题描述】：

我只是想把一个textarea放到一个div中，我觉得应该没问题：

代码

.panel {
  width: 250px;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #000;
}
.panel textarea {
  width: 100%;
}

<div class="panel">
  <textarea></textarea>
</div>

这是一个非常困难的代码，不是吗？我们所有人都这样做了数千次。

由于某种原因，textarea 的宽度在右侧有问题。勾选.panel的box模型好像不错。

在 FF、Chrome、Edge 上都试过了，到处都是一样的结果。

谁能解释一下，为什么会这样，解决办法是什么？

我创建了一个jsFiddle 只是为了好玩。

【问题讨论】：

有什么问题？是因为当您扩展文本区域时它与容器重叠吗？如果是，只需将overflow:hidden; 添加到面板。
我什么都不想要。我只想修复textarea的右侧。如您所见，右侧没有 div 的 10px 填充。
将box-sizing: border-box; 添加到您的文本区域。
@YasinYaqoobi 有效。但这是为什么呢？其他元素就像我预期的那样工作。如果你愿意，可以添加为答案，让我接受。
w3schools.com/cssref/css3_pr_box-sizing.asp

标签： html css textarea

【解决方案1】：

您应该普遍应用box-sizing:border-box 而不仅仅是div

*,
*::before,
*::after {
  box-sizing: border-box;
}
.panel {
  width: 250px;
  padding: 10px;
  border: 1px solid #000;
}
.panel textarea,
.panel input {
  width: 100%;
}

<div class="panel">
  <textarea></textarea>
  <input type="text" />
</div>

【讨论】：

是的，很好——根据经验，我通常会在我的 CSS 文件开头为所有元素设置一条 box-sizing: border-box 规则。我很少将某些元素的 box-sizing 属性恢复为浏览器默认值。

【解决方案2】：

这是因为默认情况下 textareas 具有填充和边框。当您将宽度设置为 100% 时，文本区域实际上变为 100% + padding-left/right + border-left/right-width。将 textarea 设置为 box-sizing:border-box 将使填充/边框适合指定宽度内而不是其外。

.panel textarea {width: 100%; box-sizing: border-box;}

这是一个视觉示例： https://css-tricks.com/examples/BoxSizing/

【讨论】：

【解决方案3】：

给<textarea> 一个box-sizing: border-box 应该可以解决它。：

.panel {
    width: 250px;
    border: 1px solid #000;
    box-sizing: border-box;
    padding: 10px;
}

.panel textarea {
    display: block;
    box-sizing: border-box;
    width: 100%;
}

JSFiddle

我还在 textarea 中添加了 display:block 以消除 textarea 底部边距的一些不一致 (How do I fix inconsistent Textarea bottom margin in Firefox and Chrome?)

【讨论】：

display:block 没有做任何事情
我将其设置为 display: block; 以消除 Firefox 和 Chrome 添加到 textareas 底部的额外间距 - 尽管您是正确的，它与正确的填充问题无关。我会更新我的答案。 textarea 填充不一致的参考：stackoverflow.com/questions/3453959/…

【解决方案4】：

尝试在文本区域中添加 0 的填充，因为 box-sizing:border-box 结果在某些浏览器上会有所不同。

.panel textarea{
 width: 100%;
 padding:0;
}

【讨论】：