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

前端之家收集整理的这篇文章主要介绍了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

原文链接:https://www.f2er.com/html/232574.html

猜你在找的HTML相关文章