div 中的文本区域宽度问题

Question

我只是想把一个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 的盒子模型似乎不错。

在 FF 中试过，Chrome，Edge，到处都是相同的结果。

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

我做了一个 jsFiddle 只是为了好玩。

Answer 1

给 <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

我还向文本区域添加了一个 display:block 以消除文本区域底部边距的一些不一致 (How do I fix inconsistent Textarea bottom margin in Firefox and Chrome?)

Answer 2

你应该普遍应用 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>

Answer 3

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

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

Answer 4

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

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

这是一个直观的例子： https://css-tricks.com/examples/BoxSizing/

div 中的文本区域宽度问题

Textarea width issue in div

html

css

textarea