使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

您可以使用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