Можно ли сделать так, чтобы абсолютный элемент не вылазил за футер?

Question

[Антон Литвиненко]

Делал дропдаун меню и заметил забавный баг, если меню разместить в самом низу страницы то оно вылазит за футер, так как оно не в потоке, а футер соответственно сдвигается.
я обычно делаю через опасити и визибилити, в этом случае даже закрытое меню сдвигает футер. через дисплей - только в открытом. Как быть то?

Comments

[v3shin]

После открытия проверяйте, не вылезает ли за пределы нужного элемента. Если вылезает - открывайте меню наверх. А что делать, если не влезает на экран - думайте сами. =)

[Антон Литвиненко]

Сделал песочницу
https://codepen.io/AntonLitvin/pen/mdLMvVx
пока задача свелась к тому чтобы открывалось с анимацией, а при закрытом не вылазило

[Froggyweb]

Антон Литвиненко, обычно это абсолютное позиционирование с макс-высотой и возможностью прокрутки при превышении

[Антон Литвиненко]

Froggyweb, у выпадающего блока абсолютное с макс 500 пикселей и прокруткой. и если бы я добавил в черное место блок кода, то в жизни не заметил и жил бы с этим. А так - непорядок!

Answer 1

[cssfish]

даже закрытое меню сдвигает футер

-конечно, visiblity ведь элемент никуда не девает из потока.

если волнует дыра снизу то Overflow должно помочь.

а если волнует что пункты меню не видно - тогда надо js делать, проверять что все входит. если нет, двигать куда-то, скролл внутрь ставить и тд