userAlexander
@userAlexander
Верстка наше все)

Кастомные селекты, баг с выпадающим списком за html, body, вьюпорт. Объясните пожалуйста, как это происходит?

В кастомном селекте (практически любой jQuery плагин) выпадающий список вешается на абсолюте, как он может участвовать в формировании высоты html страницы?
Допустим, высота html страницы 400px, скролл отсутствует, а выпадающий список имеет высоту за 400 и при его активации появляется скролл страницы.
Объясните пожалуйста, как так получается?
Пример
  • Вопрос задан
  • 497 просмотров
Пригласить эксперта
Ответы на вопрос 3
Это нормальное поведение.

jsfiddle.net/1vrm94a2 - absolute, скролл есть.
jsfiddle.net/ys6ry7L8 - fixed, скролла нет.

То, что элемент, позиционированный как absolute, вне основного потока элементов (или как это по-русски правильнее?), не говорит о том, что родительный контейнер должен не показывать скролл, если дочерние элементы в него не влязят. Вы можете сделать это с помощью overflow, если нужно.

jsfiddle.net/j2nh9bb7 - overflow: visible;
jsfiddle.net/y2u84t8L - overflow: scroll;
jsfiddle.net/tzubgmwp - overflow: hidden;

А вот fixed-позиционирование не влияет на скролл/overflow никак (jsfiddle.net/kbox2nzg), да, т.к. такое поведение в него изначально было заложено - привязываться к определенной точке вьюпорта и не влиять на скролл/overflow.

Более того, влияние absolute-позиционирования на скролл - это правильно. Что будет, если ваша менюшка не влезет?
Ответ написан
Petroveg
@Petroveg
Миром правят маленькие с#@&ки
Вам следует почитать про flow root, containing block и stacking context.
Так называемый flow root с overflow, отличным от visible, обязан учитывать все внутренние контексты, для которых предоставляет containing block.
Пример
Ответ написан
@Axel186
Если список вешается на абсолюте, то значит height:100% это высота нашего окна ( не зависит от контента ).
Назначим списку max-height:80% - значит список не займет больше 80% нашего окна!

Пример : https://jsfiddle.net/o6ket12g/1/
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы