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

关于第一个问题，基于百分比padding-top的值是相对于宽度而不是高度，因此如果更改浏览器的宽度，定位将不一致 - 尝试调整窗口大小看到这个。

8 Box model - 8.4 Padding properties

百分比是根据生成的框的包含块的宽度计算的。请注意，对于“margin-top”和“margin-bottom”也是如此。如果包含块的宽度取决于此元素，则在CSS 2.1中未定义结果布局。

Answer 2

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

所以它走到外面是因为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 3

正在增加文本区域大小的padding-top

*编辑：打败它！：）

Textarea的行为非常奇怪

3 个答案: