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

发布时间：2020-12-14 21:25:28 所属栏目：资源来源：网络整理

导读：在下面的示例中，底部填充被忽略，并且文本在隐藏之前流向元素的底部。是什么原因造成的？ div style="overflow: hidden; width: 300px; height: 100px; padding: 50px;" pHello,this is text./p pHello,this is text./p/div 一个视图与Firebug(紫色是填充，

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

<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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!