overflow:hidden ignoring bottom padding

Question

In the following example, the bottom padding is ignored, and the text flows to the bottom of the element before hiding. What is causing this?

Answer 1

I prefer to use as few

s as possible.

  
Hello, this is text.
  
Hello, this is text.
  
Hello, this is text.
  
Hello, this is text.
  
Hello, this is text.
  
Hello, this is text.
  
Hello, this is text.
  
Hello, this is text.
  
Hello, this is text.
  
Hello, this is text.
  
Hello, this is text.


.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/

naturally in a world without IE < 9

0 讨论(0)

查看其它10个回答

发布评论:

提交评论

---

•  加载中...