Ребенок абсолютно позиционированного элемента игнорирует нижнюю прокладку в firefox

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

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

Вот код

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>

источник

2015-03-06 Vivek Pohre

вы попробовали это .. обивка: 40px 40px 40px 40px; – Sarath

Я не вижу разницы между Firefox и Chrome (последние версии). Если вы прокрутите контейнер вниз, вы увидите нижнее дополнение. Но если вы хотите уменьшить видимую область прокрутки, вам лучше использовать 'border: 40px solid transparent;' вместо 'padding'. –

+1. @HashemQolami В Firefox 35.0.1 Я вижу проблему. Я сейчас обновляюсь до последнего Firefox, я буду повторять попытку через 1 минуту –

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

источник

2015-03-06 09:37:50

Спасибо всем за ответы. Но я придумал другое решение, добавив «.». содержимое для псевдо-элемента .abs. Совсем рядом с решением, данным Стивеном. –

Кажется, это может быть ошибка системы scoller и padding в 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>

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

Это предотвратит хром двойной визуализации отступы 2 элементов

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

источник

2015-03-06 09:46:15

Ребенок абсолютно позиционированного элемента игнорирует нижнюю прокладку в firefox

ответ

Смежные вопросы