Question

我只想将textarea放入div，我认为这应该不是问题：

CODE

.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

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

这是因为默认情况下textareas有填充和边框。当您将宽度设置为100％时，textarea实际上变为100％+填充左/右+边框左/右宽度。将textarea设置为box-sizing：border-box将使填充/边框适合指定的宽度而不是在其外部。

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

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

Answer 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以消除textareas（How do I fix inconsistent Textarea bottom margin in Firefox and Chrome?）底部边距的一些不一致性

Answer 4

而不是尝试将填充0添加到textarea，因为box-sizing：border-box结果在某些浏览器上有所不同。

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

div中的Textarea宽度问题

4 个答案: