文本区域适应父元素的宽度减去边距。

Question

我确定这是一个非常普遍的问题，但我找不到以前的答案适用于我的简单情况...

我在一个div内使用textarea。假设div的宽度为其容器的90％，我希望textarea跨越整个div.notes的宽度，减去左右margin 10px。

类似于"div的100% - 左侧margin 10px - 右侧margin 10px"

<div class="notes">
  <h2>Title</h2>
  <textarea></textarea>
  <button>Save</button>
</div>

显然，这个解决方案也对我们想要类似设置宽度的每个

内部的其他

非常有用......如何实现呢？

- Luca Detomi

Answer 1

你可以使用 calc() 实现该目标。

textarea {
    width: calc(100% - 20px); /* 20px = 10px for left and 10px for right */
    margin: auto; /* To horizontally center your textarea */
    display: block; /* Required for horizontally centering as well*/
}

演示

---

注意：如果您关注遗留浏览器的兼容性问题，请确保您也使用-webkit-calc和-moz-calc。

还有一些js polyfills，例如：

• Calc-Polyfill
• Polycalc

- Mr. Alien

---

我之前不知道这个属性，真是太棒了。我想以后会经常使用它，而不是简单的百分比大小。 我正在我的网站的受限访问区域中使用它，所以……我认为使用现代浏览器可能是可以接受的限制！:-) 谢谢。 - Luca Detomi

Answer 2

你可以使用box-sizing和padding代替margin：

div {
  width:90%;
  margin:auto;
  padding:10px;
  box-sizing:border-box;/*includes border & padding */
  background:gray;
}
textarea {
  display:block;
  width:100%;
  box-sizing:border-box;/*includes border & padding */
}

演示 http://codepen.io/anon/pen/uegjo

- G-Cyrillus

---

好的，这也是一个更好的方法，但是不应该是解决方案，因为你修改了父元素来适应textarea，还可能有其他元素..所以不应该这样做 :) - Mr. Alien

我不修改父元素，正如我所说，我将边距发送到填充并使用box-sizing将其包含在父元素的宽度中。让OP说出他对此的看法以及他可以用这些CSS行为做什么 :) - G-Cyrillus

这取决于他想要支持哪些浏览器。如果他坚持使用现代浏览器，那么计算器就没问题了。否则，你需要另一种方法。 - Sven

无论如何，跨浏览器（包括最老的浏览器）的解决方案将使用JavaScript。不需要评论box-sizing或calc()，但我们必须使用它们以便在未来完全可用。我从未认为有最好或最差的解决方案，只有运气好或不好的选择。 - G-Cyrillus