当 CSS 中存在填充时，如何使 TextArea 宽度为 100% 而不会溢出？

Question

我呈现了以下 CSS 和 HTML 片段。

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

 <div style="display: block;" id="rulesformitem" class="formitem">
  <label for="rules" id="ruleslabel">Rules:</label>
  <textarea cols="2" rows="10" id="rules"></textarea>
</div>

问题是文本区域最终比父区域宽 8px（边框 2px + 填充 6px）。有没有办法继续使用边框和填充，但将 textarea 的总大小限制为父级的宽度？

原文由 Eric Schoonover 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

为什么不忘记 hacks 而只用 CSS 来做呢？

我经常使用的一个：

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

在此处 查看浏览器支持。

原文由 Piet Bijl 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

许多 CSS 格式问题的答案似乎是“添加另一个

！”

那么，本着这种精神，您是否尝试过添加一个应用了边框/填充的包装器 div，然后将 100% 宽度的文本区域放入其中？像（未经测试）：

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

 <div style="display: block;" id="rulesformitem" class="formitem">
  <label for="rules" id="ruleslabel">Rules:</label>
  <div class="textwrapper"><textarea cols="2" rows="10" id="rules"/></div>
</div>

原文由 Dave Sherohman 发布，翻译遵循 CC BY-SA 3.0 许可协议