对于使用Bootstrap的人，textarea。表单控制也会导致文本区域大小问题。Chrome和Firefox似乎使用不同的高度与以下引导CSS:

textarea.form-conrtol{
    height:auto;
}

如果你不太介意填充的宽度，这个解决方案实际上会保持填充的百分比。

textarea
{
    border:1px solid #999999;
    width:98%;
    margin:5px 0;
    padding:1%;
}

不完美，但你会得到一些填充和宽度加起来是100%，所以这一切都很好

问题在于box-sizing属性。 默认情况下，box-sizing属性的初始值是content-box。 所以你在引擎盖下面有这样的东西:

textarea {
  border:1px solid #999999;
  width:100%;
  margin:5px 0;
  padding:3px;
  box-sizing: content-box;
}

box-sizing:内容框;意味着实际元素的宽度等于元素内容框的宽度。 所以当你添加padding(在这个例子中padding-right和padding-left ->，因为我们在讨论width)和border(在这个例子中border-right和border-left ->，因为我们在讨论width)，这些值被添加到最终的width中。所以你的元素会比你想要的宽。

设置为box-sizing: border-box;。宽度的计算方法如下:

horizontal border + horizontal padding + width of content box = width

在这种情况下，当你添加水平边框和水平填充时，元素的最终宽度不会改变，事实上，内容框将缩小以满足方程。

如果你像这样填充和偏移:

textarea
{
    border:1px solid #999999;
    width:100%;
    padding: 7px 0 7px 7px; 
    position:relative; left:-8px; /* 1px border, too */
}

textarea的右侧与容器的右侧完美对齐，textarea内的文本与容器中的正文完美对齐……和左侧的textarea“突出”一点。它有时更漂亮。

我经常用calc()来解决这个问题。你只需要给textarea一个100%的宽度和一定数量的填充，但你必须减去你给textarea的100%宽度的左右填充总数:

textarea {
    border: 0px;
    width: calc(100% -10px);
    padding: 5px; 
}

或者如果你想给文本区域一个边框:

textarea {
    border: 1px;
    width: calc(100% -12px); /* plus the total left and right border */
    padding: 5px; 
}

我在这里遇到了另一个解决方案，它非常简单:在textarea的容器中添加padding-right。这保留了文本区域的边距、边框和填充，从而避免了Beck指出的chrome和safari在文本区域周围放置焦点高亮的问题。

容器的padding-right应该是文本区域两侧的有效边距、边框和填充之和，再加上容器可能需要的任何填充。对于原题中的情况

textarea{
    border:1px solid #999999;
    width:100%;
    margin:5px 0;
    padding:3px;
}
.textareacontainer{
    padding-right: 8px; /* 1 + 3 + 3 + 1 */
}

<div class=“textareacontainer”> <textarea></textarea> </div>