переполнение: скрыто, игнорируя нижнее заполнение

Я предпочитаю использовать как можно меньше <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

Нижнее заполнение существует, но содержимое толкает нижнее заполнение вниз и не отображается из-за переполнения: скрыто. Что вы можете сделать, так это поместить содержимое в контейнер следующим образом:

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

Надеюсь это поможет.

Я не думаю, что вы получите тот эффект, который ищете, без добавления второго 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).

Подробнее о блочной модели

Вы заметите это наиболее отчетливо, если установите цвета фона или фоновые изображения для элементов 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 со свойством clip !!

ознакомьтесь с ответом держадина @ Как я могу принудительно переполнить: скрытый, чтобы не использовать мое пространство справа от заполнения

Я обнаружил, что самым простым способом было добавить элемент между родителем и дочерним элементом с помощью

overflow:hidden;
height:100%;

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

Тогда мне не нужно было беспокоиться о соответствии высоты/поля среднего элемента.

Переполнение не имеет ничего общего с заполнением. В этом случае заполнение больше похоже на «внутреннюю границу». Если вы хотите, чтобы переполнение было скрыто, вам нужно изменить фактический размер вашего поля и вместо этого использовать нижнее поле 0 пикселей. Переполнения по-прежнему будут отображаться в вашем заполнении.

он же:

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

Отступы и поля всегда идут в CSS так: вверху справа внизу слева (именно в таком порядке)

Если какое-либо значение равно 0px, вы можете просто использовать ноль. нравится:

padding:0;

or:

padding: 0 10px 0 0;

Любое значение, отличное от нуля, должно быть указано с помощью px, em или pt.