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

Question

В следующем примере нижний отступ игнорируется, а текст перемещается в нижнюю часть элемента, прежде чем скрыться. Что вызывает это?

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

Вид с Firebug (фиолетовый - это заполнение, синий - это фактическая область содержимого):

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

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

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

Answer 3

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

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

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

Answer 4

Не думаю, что вы получите желаемый эффект без добавления 2-го деления.

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

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

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

Answer 6

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

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

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

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

Answer 7

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

overflow:hidden;
height:100%;

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

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

Answer 8

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

проверить ответ holdin @ Как я могу вызвать переполнение: скрыто, чтобы не использовать мое пространство справа # 1004 *

Answer 9

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

Answer 10

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