在下面的示例中，底部填充被忽略，并且文本在隐藏之前流向元素的底部。是什么原因造成的？
<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;
}
自然地在没有IE< 9
