Переполнение: скрытое игнорирование нижней части

Ответ 1

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

Ответ 2

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

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

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

Ответ 3

Я немного опаздываю в игру, но Padding делает внутренний контент таким же, как область содержимого (что один из способов отличается от границы или поля).

Подробнее о модели ящиков

Вы заметите это наиболее четко, если вы установите цвета фона или фоновые изображения в divs с дополнением. Цвет фона/изображение выходит за пределы области содержимого и появляется внутри области заполнения.

Решение состоит в том, чтобы вместо этого установить маржу. или комбинация отступов и полей (где нет нижней прокладки, но вместо этого нижний край равной высоты.

<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

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

Ответ 5

Если ваш 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>

Нажмите здесь для демонстрации в реальном времени

Ответ 6

Переполнение не имеет ничего общего с заполнением. В этом случае прокладка больше похожа на "внутреннюю границу". Если вы хотите, чтобы переполнение было скрыто, вам нужно изменить фактический размер вашего поля и использовать нижний предел 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>

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

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

padding:0;

или

padding: 0 10px 0 0;

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

Ответ 7

Я знаю, что сейчас это немного устарело, но недавно я получил эту проблему и исправил ее добавлением дополнительного внутреннего 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/

Ответ 8

оберните содержимое в div с помощью свойства клипа!!

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

Ответ 9

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

overflow:hidden;
height:100%;

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

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

Ответ 10

Действительно поздний ответ, но я хочу дать действительно свежее и элегантное решение с помощью CSS. Можно включить ::after псевдоэлементов, но более устойчивое решение:

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

при условии, что у div может быть id или class с которым можно идентифицировать. последний элемент <p> заполнит недостающее нижнее пространство.

Нет больше вложенных узлов и возиться с HTML! Яппи!