请看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 在 height+padding-top=100% 之后超出了它的父级？ 第二个是这个特定宽度的 textarea 是如何以及从哪里得出的？
谢谢
最佳答案
关于第一个问题，基于百分比的padding-top值是相对于宽度的，而不是高度，因此如果浏览器的宽度改变，定位将不一致- 尝试调整窗口大小以查看此内容。
8 Box model - 8.4 Padding properties
The percentage is calculated with respect to the width of the generated box's containing block. Note that this is true for 'margin-top' and 'margin-bottom' as well. If the containing block's width depends on this element, then the resulting layout is undefined in CSS 2.1.
关于css - Textarea 非常奇怪的行为，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23505459/