Переполнение: скрытое игнорирование нижней части
В следующем примере нижнее дополнение игнорируется, и текст течет в нижней части элемента перед скрытием. Что вызывает это?
<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 (фиолетовый - заполнение, синий - фактическая область содержимого):
![Firebug]()
Ответы
Ответ 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! Яппи!