препълване: скрито игнориране на долната подложка

Предпочитам да използвам възможно най-малко <div>.

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

естествено в свят без IE ‹ 9

Долната подложка съществува, но съдържанието избутва долната подложка надолу и не се вижда поради overflow:hidden. Това, което можете да направите, е да поставите съдържанието в контейнер по следния начин:

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

Можете да играете с цигулката тук - http://jsfiddle.net/BMZeS/

Надявам се това да помогне.

Не мисля, че ще получите ефекта, който търсите, без да добавите 2-ро div.

http://jsfiddle.net/Mxhzf/

(добавен фонов цвят, за да стане ясно какво се случва)

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

Малко закъснях с играта, но Padding изобразява вътрешното съдържание по същия начин като областта на съдържанието (това е един от начините, по които се различава от Border или Margin).

Научете повече за модела Box

Ще забележите това най-ясно, ако зададете фонови цветове или фонови изображения на div с подложка. Фоновият цвят/изображението се простира отвъд частта със съдържанието и се появява вътре в областта за подложка.

Решението е вместо това да зададете марж. или комбинация от подложка и поле (където няма подложка отдолу, а вместо това има долно поле с еднаква височина.

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

Ако вашият CSS използва padding-bottom и overflow:hidden заедно, това ще причини проблема, който описвате.

Най-доброто решение е:

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

Щракнете тук за демонстрация на живо

Наистина късен отговор, но искам да дам наистина свежо и елегантно решение с CSS. Човек може да включва ::after псевдоелементи, но по-устойчиво решение е:

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

ако приемем, че div може да има id или class, с които да се идентифицира. В това решение последният <p> елемент ще запълни липсващото долно пространство.

Край на вложените възли и ръчкането с HTML! Юпи!

Знам, че това вече е малко старо, но наскоро имах този проблем и го поправих, като добавих допълнителен вътрешен div, който има марж.

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

обвийте съдържанието в div със свойство клип!!

вижте отговора на holdin @ Как мога да принудя препълване: скрито, за да не използвам моето място за подложка вдясно

Открих, че най-лесният начин е да добавя елемент между родителя и детето с

overflow:hidden;
height:100%;

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

Тогава не трябваше да се притеснявам за съвпадение на височината/полето на средния елемент.

Overflow няма нищо общо с padding. Подложката е по-скоро като "вътрешна граница" в този случай. Ако искате преливането да бъде скрито, трябва да промените действителния размер на вашето поле и вместо това да използвате долно поле от 0px. Преливанията ще продължат да се показват във вашата подложка.

известен още като:

<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 и Margins винаги вървят така в CSS: горе вдясно долу вляво (в този ред)

Ако някоя стойност е 0px, можете просто да използвате нула. като:

padding:0;

or:

padding: 0 10px 0 0;

Всяка стойност, различна от нула, трябва да бъде посочена с px, em или pt.