让 HTML textarea 控件扩展到容器的宽度答案

【问题标题】：Getting HTML textarea controls to expand to width of container让 HTML textarea 控件扩展到容器的宽度
【发布时间】：2012-03-04 14:57:22
【问题描述】：

我希望我的 textarea 控件遵循标准块显示布局行为，以便它们扩展到包含父级的宽度。简单地设置display:block; 不会这样做——它们默认为一些带有值的默认值。设置width:100%; 不起作用，因为控件中的任何填充都意味着它们溢出容器边界。

HTML：

<div class='container'>
    <div >test</div>
</div>
<div class='container'>
    <textarea >test</textarea>
</div>

CSS：

.container {
    width:300px;
    border:black solid 1px;
    margin:10px;
}
.container > div {
    display:block;
    padding:10px;
    background:red;
}
.container > textarea {
    display:block;
    padding:10px;
    background:red;
}

结果：

http://jsfiddle.net/hKcjc/

【问题讨论】：

标签： html layout textarea css

【解决方案1】：

您可以使用名为 box-sizing 的 css3 属性来解决此问题：http://jsfiddle.net/QK78b/

添加以下内容：

width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;

请参阅 Box Sizing | CSS-Tricks 了解有关此问题的说明以及它与 TextAreas 的关系

【讨论】：

添加“box-shadow: none;”