overflow:hidden ignoring bottom padding

问题:

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?

<div style="overflow: hidden; width: 300px; height: 100px; padding: 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>

A view with Firebug (purple is padding, blue is actual content area):

回答1:

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

回答2:

The bottom padding exists but the content pushes the bottom padding down and is not visible because of overflow:hidden. What you can do is place the content in a container like so:

<div style="overflow:hidden; width: 300px; height: 200px; border:1px solid #000; ">
    <div style="overflow:hidden; width:auto; height:140px; border:30px solid #ff0000;">
        <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>
</div>

You can play with the fiddle here - http://jsfiddle.net/BMZeS/

Hope this helps.

回答3:

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/

回答4:

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;
}

回答5:

If your CSS uses padding-bottom and overflow:hidden together,it will cause the problem you describe.

The best solution is:

<div style="padding: 50px; border:1px solid #000">
    <div style="overflow: hidden; width: 300px; height: 100px;">
        <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>
</div>

Click here for live demo

回答6:

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!

回答7:

Overflow has nothing to do with padding. Padding is more like an "internal border" in this case. If you want the overflow to be hidden, you need to change the actual size of your box, and use a bottom-margin of 0px instead. Overflows will still show up in your padding.

aka:

<div style="overflow: hidden; width: 300px; height: 100px; padding: 50px 50px 0 50px; margin-bottom:0px;">
  <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>

Padding and Margins always go like this in CSS: top right bottom left (in that order)

If any value is 0px, you can simply use a zero. like:

padding:0;

or:

padding: 0 10px 0 0;

Any value other than zero must be specified with px, em, or pt.

回答8:

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/

回答9:

wrap the content in a div with a clip property!!

check out heldin's answer @ How can I force overflow: hidden to not use up my padding-right space

回答10:

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.