textarea适合父母宽度减去边距

Question

我确信这是一个非常常见的问题,但我无法在以前的答案中找到我的简单情况....

我有一个textarea内部div

想象一下,div拥有width的90%其容器的,我想这textarea整个跨越width的div .notes负左右,margin中10px

类似100%的div - 10px的left margin 10px的right margin")

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

显然,解决方案可能是非常有用的也每隔div内div为此我们要设置一个width类似的方式....如何获取呢？

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,如:

• 钙填充工具
• Polycalc