为什么不忘记这些技巧，只用CSS来做呢?

我经常使用的一个:

.boxsizingBorder {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

点击这里查看浏览器支持。

填充值也起着一定的作用。使用你发布的风格:

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

宽度已经填满，左、右填充为3px。所以会有溢出。

如果你改变你的风格如下:

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

我的样式现在所做的是它的宽度为98%剩下的2%完成100%这就是为什么我给左填充1%右填充1%的原因。这样，溢出的问题就可以解决了

我在这里遇到了另一个解决方案，它非常简单:在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>

问题在于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

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

你可以使用box-sizing属性，所有主流兼容标准的浏览器和IE8+都支持它。不过，对于IE7，你仍然需要一个变通方案。点击这里阅读更多。

不，CSS不能这样做。这就是微软最初引入另一种可能更实用的盒子模型的原因。最终获胜的盒子模型使得混合百分比和单位不切实际。

我不认为这是可以与你表达填充和边界宽度的百分比的父。