Textarea很奇怪的行为

Question

请看看http://jsfiddle.net/g995s/。

<div id="textarea_wrapper"> 
    <textarea>How and where my width is derived from?</textarea> 
</div> 


#textarea_wrapper{ 
height: 250px; 
border:thick solid green; 
} 
textarea{ 
background-color: #930;  
border:none; 
margin:0; 
width:auto; 
resize:none; 
    overflow:hidden; 
height:95%; 
    padding-top:5%; 
} 

这是不可能的我解释两件事情：第一个是为什么textarea的推移其母公司之外，因为身高+填充顶= 100％？ 第二个是如何以及从哪里得到这个特定宽度的textarea？

谢谢

Answer 1

填充顶部百分比基于父元素的宽度，而不是高度。

因此，它是因为95％的较小高度+ 5％的较大宽度= 100％以上的高度。

宽度是textarea的默认宽度，因为在textareas上设置width: auto什么都不做。

如果您不喜欢顶部和底部百分比如何工作，请将textarea的宽度和高度设置为100％，并使用固定尺寸（如px或em）作为填充。

然后在textarea上使用box-sizing: border-box使其宽度，高度和填充保持在其父项的100％以内; http://www.paulirish.com/2012/box-sizing-border-box-ftw/

Answer 2

在关于第一个问题，基于百分比padding-top值相对于宽度，没有高度，因此，如果浏览器的宽度改变的定位不会是一致的 - 尝试调整窗口大小以查看此信息。

8 Box model - 8.4 Padding properties

百分率的计算相对于所生成的框的包含块的宽度。请注意，'margin-top'和'margin-bottom'也是如此。如果包含块的宽度取决于这个元素，那么结果布局在CSS 2.1中是未定义的。

Answer 3

其padding-top是增加文本区域的大小

*编辑：挨打吧！ :)