html – overflow：隐藏忽略底部填充

在下面的示例中，底部填充被忽略，并且文本在隐藏之前流向元素的底部。是什么原因造成的？

<div style="overflow: hidden; width: 300px; height: 100px; padding: 50px;">
  <p>Hello,this is text.</p>
  <p>Hello,this is text.</p>
</div>

一个视图与Firebug(紫色是填充，蓝色是实际内容区域)：

解决方法

我更喜欢使用尽可能少的< div> s。

<div class="container">
  <p>Hello,this is text.</p>
</div>

.container{
  padding: 30px 30px 0;
  position: relative;
  width: 240px;
  height: 170px;
  border:1px solid #000;
  overflow: hidden;
}
.container:after{
  content: ' ';
  display: block;
  background-color: red;
  height: 30px;
  width: 100%;
  position: absolute;
  bottom: 0;
}

http://jsfiddle.net/bgaR9/

自然地在没有IE< 9