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 don't think you're going to get the effect you are looking for without adding a 2nd div.

http://jsfiddle.net/Mxhzf/

(background color added to make it clear what is happening)

HTML:

<div id="outer">
    <div id="inner">

        <!-- CONTENT HERE -->

    </div>
</div>

CSS:

#outer{
     width: 300px;  
     height: 300px; 
    padding: 20px;
}

#inner{
     width: 300px;
    height: 300px;
    overflow: hidden;
}

Answer 2

I prefer to use as few <div>s as possible.

<div class="container">
  <p>Hello, this is text.</p>
  <p>Hello, this is text.</p>
  <p>Hello, this is text.</p>
  <p>Hello, this is text.</p>
  <p>Hello, this is text.</p>
  <p>Hello, this is text.</p>
  <p>Hello, this is text.</p>
  <p>Hello, this is text.</p>
  <p>Hello, this is text.</p>
  <p>Hello, this is text.</p>
  <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/

naturally in a world without IE < 9

Answer 3

Really late answer, but I want to give a really fresh and elegant solution with CSS. One could involve ::after pseudo-elements, but a more sustainable solution is:

    #mydiv p:last-child{
        margin-bottom:50px;
    }

assuming the div can have an id or a class to be identified with. In this solution the last <p> element will fill the missing bottom space.

No more nested nodes and fiddling with HTML! Yuppie!

Answer 4

I found that the easiest way was to add an element between the parent and child with

overflow:hidden;
height:100%;

http://jsfiddle.net/va78jsm5/2/

Then I didn't have to worry about matching the height/margin of the middle element.

Answer 5

I'm a little late to the game, but Padding renders internal content the same as the content area (that's one of the ways it's different from a Border or a Margin).

Learn More About the Box Model

You'll notice this most clearly if you set background colors or background images to divs with padding. The background color/image extends beyond the content portion and appears inside the padding area.

The solution is to set a margin instead. or a combination of a padding and margin (where there is no bottom padding, but instead a bottom margin of equal height.

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

http://jsfiddle.net/Uhg38/

Answer 6

I know this is a bit old now, but I had this issue recently and fixed it by adding an additional inner div which has a margin.

.promo {
    height: 100px;
    width: 300px;
    border: 1px solid black;    
    padding: 0px 10px;
    overflow: hidden;
}

.inner {
    height: 86px;
    width: 100%;
    margin: 7px 0px;
    overflow: hidden;
}

.promo .inner p {
    padding 0;
    margin: 0;
}

http://jsfiddle.net/7xhuF/1/