@parnasmi

Как убрать двойной скрол и пустое место из-за длины абс. спозиционированного меню?

Всем привет!
На данном странице из-за абсолютно спозиционированных блоков(выпадаюшее меню при наведении на пунктов меню) меню у слева наверху появляется пустое место снизу. Из-за этого появляется пустое место снизу и двойной скролл. Двойной скролл можно убрать если у html убрать правило overflow-x:hidden; Но, вот никак не пойму причину, почему абс. позиционированные блоки порождают отступ снизу? Ведь они же не в потоке?
Надеюсь кто-нибудь объяснить мне почему так происходит. Заранее спасибо.
  • Вопрос задан
  • 58 просмотров
Решения вопроса 2
@kvaak
FE
Пройдите в меню:
Лампы -> Красота и здоровье
Что Вы видите?) Правильно, нереально большой список итемов, из-за которых и все проблемы.
Очень рекомендую добавить максимальную высоту списков с overflow: auto;
Иначе, даже выбитому из потока парню надо куда-то вмещаться, чтобы его юзверь-то увидел
Ответ написан
dpr
@dpr
frontend developer
почему абс. позиционированные блоки порождают отступ снизу? Ведь они же не в потоке?
Надеюсь кто-нибудь объяснить мне почему так происходит.

А куда же им деться?
Причина очевидна — блок растягивает страницу настолько, чтобы вместиться в неё. И неважно, абсолютный он, или нет.

Ведь они же не в потоке?

Ну и что? Ну вынули элемент из потока, со страницы-то он никуда не делся.

---
Простое решение:
дать выпадашкам position:fixed а при ховере - absolute
Побочный эффект — скролл страницы будет проявляться только при открытом меню, если оно не вместится.
Еще простое решение (частный случай):
Для последнего уровня задать максимальную высоту и oveflow:auto
Минусы — годится только для последнего уровня, потому что его границы уже ничего не вылезет из-за overflow

Все остальные решения требуют вмешательства javascript или серьёзной переработки принципа показа подменюшек.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@parnasmi Автор вопроса
Огромное вам спасибо. Узнал где-то копаться[
Ответ написан
Ваш ответ на вопрос

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

Войти через TM ID
Похожие вопросы