Css - применение прокладки к коробке со свитком, нижнее заполнение не работает

Я не могу получить нижнее дополнение для работы, когда я использую overflow-y: auto в поле.

HTML:

<div id="container">
    <div id="some_info"></div>
</div>

CSS

#container {
    padding: 3em;
    overflow-x: hidden;
    overflow-y: auto;
    width: 300px;
    height: 300px;
    background: red;
}

#some_info {
    height: 900px;
    background: #000;
}

Fiddle: http://jsfiddle.net/rwgZu/

EDIT: я использую Firefox

Ответы

Ответ 1

Еще одно решение без дополнительных DIV.

#container:after {
  content: "";
  display: block;
  height: 50px;
  width: 100%;
}

Работа в FF, Chrome, IE8-10.

Ответ 2

Я опаздываю на вечеринку, но я подумал, что стоит добавить другое решение, в котором рассматриваются некоторые проблемы, поднятые выше.

Я пришел сюда из-за того, что @Philip возникла в ответ на решение Alexandre Lavoie: у меня есть динамически созданный контент внутри контейнера, поэтому я не могу просто применить стиль к определенному имени div, например #some_info.

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

#container > :last-child {
    margin-bottom: 3em;
}

Пока последний дочерний элемент в контейнере div является элементом уровня блока, это должно сделать трюк.

DEMO: http://jsfiddle.net/rwgZu/240/

P.S. Если Firefox не позволяет прокручивать до конца отступы, это действительно ошибка (как было предложено @Kyle), она по-прежнему не исправлена с Firefox 47.0. Срыв! Internet Explorer 11.0.9600.17843 демонстрирует то же поведение. (Google Chrome, напротив, показывает нижнее дополнение, как ожидалось.)

Ответ 3

Вот возможный подход, который отлично работает:

#container {
    overflow-x: hidden;
    overflow-y: auto;
    width: 300px;
    height: 300px;
}

#some_info {
    height: 900px;
    background: #000;
    border: 3em solid red;
}

Ответ 4

Демо

Привет, теперь используется для этого css

#container {
    padding: 3em;
    overflow-x: hidden;
    overflow-y: auto;
    width: 300px;
    height: 300px;
    background: red;
    padding-bottom:0; // add this line in your css
}

#some_info {
    height: 900px;
    background: #000;
    margin-bottom:3em; // add this line in your css
}

Демо

Ответ 5

На основе isHristov answer:

#container {
    padding: 3em 3em 0 3em; /* padding-bottom: 0 */
    overflow-x: hidden;
    overflow-y: auto;
    width: 300px;
    height: 300px;
    background: red;
}

#container:after {
    content: "";
    display: block;
    height: 0;
    width: 100%;
    margin-bottom: 3em; /* length you wanted on padding-bottom */
}

Однако его решение добавляет дополнительное пространство в браузерах, которые правильно справляются с этой ситуацией.

Ответ Дэн Робинсон отлично, если у вас нет нескольких элементов в #container, которые динамически отображаются/скрыты. В этом случае последний ребенок может нацелиться на скрытый элемент и не имеет никакого эффекта.

Ответ 6

Создайте родительский div как обычно и сделайте внутренний div сделайте то, что вы хотите.

Удалите overflow-x и overflow на #container, измените height на 100% и добавьте overflow-y:scroll; в #some_info

#container {
    padding: 3em;
    width: 300px;
    height: 300px;
    background: red;
}

#some_info {
    height: 100%;
    background: #000;
    overflow-y:scroll;
    width:100%;
}

Рабочая демонстрация: http://jsfiddle.net/9yuohxuh/

Ответ 7

Это не только с нижним дополнением. Правильное дополнение/граница/интервал также игнорируется (вы не можете видеть его в своем примере, потому что у него нет содержимого, а ширина не прокручивается)

Все ответы выше не работают в хроме 43, генерируя до 3 полос прокрутки! или если содержимое переполняет #some_info.

Пример: http://jsfiddle.net/LwujL3ad/

Если это сработало для вас, вероятно, потому, что контент был не таким широким, как прокручиваемый элемент или фиксированный размер.

Правильное решение:

Установите # some information, чтобы отобразить: таблицу и добавьте дополнение или границу к ней, а не к контейнеру прокрутки.

#container {
    overflow: scroll;
    width: 300px;
    height: 300px;
    background: red;
    padding-bottom:0;
}

    #some_info {
    display:table;
    border: solid 3em red;
    height: 900px;
    background: #000;
    margin-bottom:3em;
    color: white;
}

DEMO: http://jsfiddle.net/juh7802x/

Единственный элемент, который не терпит неудачу, и соблюдает ЛЮБОЮ рамку и дополнение, добавленные там как разделитель, - это ТАБЛИЦА.

Я пробовал, и независимо от того, будет ли это следующий прямой дочерний элемент или он вложен много элементов в глубину, любое неконтекстное моделирование НЕ будет расширяться, чтобы обернуть контент, и останется на 100% ширины родителя. Это вздор, потому что наличие содержимого BIGGER, чем родитель, является ТОЧНО сценарием, в котором требуется прокручивание div!

Для динамического решения (как контейнера, так и содержимого) установите контейнер элементов в контейнере прокрутки для отображения: table.