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的{{1}}中的每个其他{{1}}，该解决方案也非常有用....如何获取此？

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*/
}

Demo

注意：如果您了解旧版浏览器，请务必使用-webkit-calc和-moz-calc。

有一些js polyfill，如：

Answer 2

你可以使用盒子大小和填充代替边距：

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 */
}

DEMO http://codepen.io/anon/pen/uegjo

textarea适合父母宽度减去边距

2 个答案: