Дочерний элемент абсолютно позиционированного элемента игнорирует нижнее заполнение в Firefox

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

Это происходит только с браузером firefox. Хром ведет себя нормально. Кто-нибудь знает способ исправить это?

Вот код

 body {
   background: lightblue;
 }
 .abs {
   background: rgba(0, 0, 0, 0.5);
   position: absolute;
   top: 20%;
   bottom: 20%;
   right: 30%;
   left: 30%;
   padding: 40px;
   overflow: auto;
 }
<!DOCTYPE html>
<html>

<body>
  <div class="abs">
    <div>
      asdf asdf asdf asdfasdf asdf asdf asdf asdf asfadf asdfsadfsadf safdasdfasfdas dfasdf asdf asdf asdfasdf asdf asdf asdf asdf asfadf asdfsadfsadf safdasdfasfdas dfasdf asdf asdf asdfasdf asdf asdf asdf asdf asfadf asdfsadfsadf safdasdfasfdas dfasdf asdf
      asdf asdfasdf asdf asdf asdf asdf asfadf asdfsadfsadf safdasdfasfdas dfasdf asdf asdf asdfasdf asdf asdf asdf asdf asfadf asdfsadfsadf safdasdfasfdas dfasdf asdf asdf asdfasdf asdf asdf asdf asdf asfadf asdfsadfsadf safdasdfasfdas dfasdf asdf asdf
      asdfasdf asdf asdf asdf asdf asfadf asdfsadfsadf safdasdfasfdas dfasdf asdf asdf asdfasdf asdf asdf asdf asdf asfadf asdfsadfsadf safdasdfasfdas dfasdf asdf asdf asdfasdf asdf asdf asdf asdf asfadf asdfsadfsadf safdasdfasfdas dfasdf asdf asdf asdfasdf
      asdf asdf asdf asdf asfadf asdfsadfsadf safdasdfasfdas dfasdf asdf asdf asdfasdf asdf asdf asdf asdf asfadf asdfsadfsadf safdasdfasfdas dfasdf asdf asdf asdfasdf asdf asdf asdf asdf asfadf asdfsadfsadf safdasdfasfdas dfasdf asdf asdf asdfasdf asdf
      asdf asdf asdf asfadf asdfsadfsadf safdasdfasfdas dfasdf asdf asdf asdfasdf asdf asdf asdf asdf asfadf asdfsadfsadf safdasdfasfdas dfasdf asdf asdf asdfasdf asdf asdf asdf asdf asfadf asdfsadfsadf safdasdfasfdas dfasdf asdf asdf asdfasdf asdf asdf
      asdf asdf asfadf asdfsadfsadf safdasdfasfdas dfasdf asdf asdf asdfasdf asdf asdf asdf asdf asfadf asdfsadfsadf safdasdfasfdas dfasdf asdf asdf asdfasdf asdf asdf asdf asdf asfadf asdfsadfsadf safdasdfasfdas dfasdf asdf asdf asdfasdf asdf asdf asdf
      asdf asfadf asdfsadfsadf safdasdfasfdas dfasdf asdf asdf asdfasdf asdf asdf asdf asdf asfadf asdfsadfsadf safdasdfasfdas dfasdf asdf asdf asdfasdf asdf asdf asdf asdf asfadf asdfsadfsadf safdasdfasfdas dfasdf asdf asdf asdfasdf asdf asdf asdf asdf
      asfadf asdfsadfsadf safdasdfasfdas dfasdf asdf asdf asdfasdf asdf asdf asdf asdf asfadf asdfsadfsadf safdasdfasfdas dfasdf asdf asdf asdfasdf asdf asdf asdf asdf asfadf asdfsadfsadf safdasdfasfdas dfasdf asdf asdf asdfasdf asdf asdf asdf asdf asfadf
      asdfsadfsadf safdasdfasfdas dfasdf asdf asdf asdfasdf asdf asdf asdf asdf asfadf asdfsadfsadf safdasdfasfdas dfasdf asdf asdf asdfasdf asdf asdf asdf asdf asfadf asdfsadfsadf safdasdfasfdas dfasdf asdf asdf asdfasdf asdf asdf asdf asdf asfadf asdfsadfsadf
      safdasdfasfdas dfasdf asdf asdf asdfasdf asdf asdf asdf asdf asfadf asdfsadfsadf safdasdfasfdas dfasdf asdf asdf asdfasdf asdf asdf asdf asdf asfadf asdfsadfsadf safdasdfasfdas df
    </div>
  </div>
</body>

</html>


css
person Vivek Pohre    schedule 06.03.2015    source источник
comment
вы пробовали это .. padding: 40px 40px 40px 40px;   -  person Sarath    schedule 06.03.2015
comment
Я не вижу никакой разницы между Firefox и Chrome (последние версии). Если вы прокрутите контейнер вниз, вы увидите нижний отступ. Но если вы хотите уменьшить видимую область прокрутки, лучше использовать border: 40px solid transparent; вместо padding.   -  person Hashem Qolami    schedule 06.03.2015
comment
+1. @HashemQolami В Firefox 35.0.1 я вижу проблему. Сейчас я обновляюсь до последней версии Firefox, я повторю попытку через 1 минуту.   -  person Andrea Ligios    schedule 06.03.2015
comment
Ошибка осталась в последней версии 36.0.1.   -  person Andrea Ligios    schedule 06.03.2015

Ответы (2)


arrow_upward
0
arrow_downward

Если вы примените отступ к внутреннему <div> вместо вашего .abs, это должно применить отступ к нижней части этого текста.

person Steven Hoskins    schedule 06.03.2015
comment
Спасибо всем за ответы. Но я придумал другое решение, добавив файл . содержимое после псевдоэлемента .abs. Довольно близко к решению, данному Стивеном. - person Vivek Pohre; 07.03.2015

arrow_upward
0
arrow_downward

Похоже, это может быть ошибка системы скроллинга и заполнения в Firefox. Что вызвано ограничением прокрутки child div внутри .abs.

Пока я придумываю решение, чтобы обойти это.

body{
  background: lightblue;
}
.abs{
  background: rgba(0,0,0,0.5);
  position: absolute;
  top: 20%;
  bottom: 20%;
  right: 30%;
  left: 30%;
  padding: 40px;
  padding-bottom: 0;
  overflow: auto;
}

.abs div{
  padding-bottom: 40px;
}
<div class="abs">
  <div>
    asdf asdf asdf asdfasdf asdf asdf asdf asdf asfadf asdfsadfsadf safdasdfasfdas dfasdf as safdasdfasfdas dfasdf asdf asdf asdfasdf asdf asdf asdf asdf asfadf asdfsadfsadf safdasdfasfdas dfasdf asdf asdf asdfasdf asdf asdf asdf asdf asfadf asdfsadfsadf safdasdfasfdas df
  </div>
</div>

Переопределить padding-bottom на .abs. Мы установим его позже в дочернем div.

Это предотвратит двойное отображение хромом заполнения 2 элементов.

Изменить удалить комментарии из CSS. Это испортило вывод фрагмента. Это означает, что до этого редактирования это не работало.

person Linh Pham    schedule 06.03.2015