html - 获取 HTML textarea 控件以扩展到容器的宽度

Question

我希望我的 textarea 控件遵循标准 block 显示布局行为，以便它们扩展到包含父控件的宽度。简单地设置 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/

Answer 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 的关系