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

Question

我希望我的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/

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; 

见框尺寸| CSS-Tricks解释此问题及其与TextAreas的关系