Как решить проблему с админской панелью wordpress на смартфонах (панель ломает 100% высоту html)??
Давать пример сайта смысла - 0.
Любой желающий может накатить Wordpress, woocommerce и любую тему (в моём случае это Botiga).
Всем известно что footer при недостатке контента не прилипает к низу страницы на wordpress. Это решается очень легко через свойство grid.
Окей эту проблему решили.
Но когда вылазит админская панель, это ломает 100% высоту html и footer не прилипает к концу страницы.
Да, можно заполнить контентом и всё будет чики бамбони. Но это костыль.
Есть ли у кого готовое решение?
П. С. модеры - не надо писать мне что это "задание а не вопрос и ты сам ничё не сделал". Да я ничё не сделал потому что это багулина и где чё искать неизвестно, в интернете инфы 0!
а вот так будет если сделать position fixed
Дополнительно:
Любой желающий может накатить Wordpress, woocommerce и любую тему (в моём случае это Botiga).
все сразу кинулись накатывать Wordpress, woocommerce и любую тему
с вашей стороны было бы более уважительно, если бы вы воспроизвели проблему в песочнице и скинули сюда ссылку, вам же это нужно в первую очередь
Я не заставляю (лично вас) ставить. Те у кого стоит могут поделиться (или нет) своими решениями
Выглядит всрато.
Если сделать fixed то это имеет смысл так как панель будет закреплена сверху
Если сделать relative - панель уедет в самый низ. И тогда html уже НЕ будет сломан и будет занимать 100%.
Но остаётся вопрос - как это панель при relative запиз....наверх?
Просто в первом случае она закреплена внизу. И страница html занимает 100% высоты и не ломается.
А при absolute она закреплена сверху но html сломан и 100% не заполняется. Внизу будет всегда дыра если контента мало.
Это недоработка...
При absolute она просто выглядит всрато так как оставляет проплешину внизу при недостатке контента и ломает html.
Есть 2 варианта.
1) position: fixed, но тогда надо думать как убрать проплешину внизу (всё равно чинить html надо будет)
2) position: relative - надо понять как поднять div выше всех. (я думаю скорее всего придётся ковырять код)
п. с. вордпресс му аки
Сама панелька прекрасно адаптируется
А если сделать fixed, то как починить проплешь? тоже никак?
У тебя стоит wordpress. Создай левую страницу (10 секунд). Открой её (5 секунд). И включи в браузере отображение с мобилки.
Вот и увидишь проблему.
Я то что должен сделать?)))
Я понимаю если случай частный - ок. НО если багулина в 100% случаях то смысл?
дак может проще тебе самому песочницу запустить и глянуть если хочешь помочь?
не
Только потому попробуй не помочь))
песочница
ломись. Заходи
Включай инспектор и включай отображаение с телефона. Увидишь проблему....
html ломается.
П. С. тут кстати когда relative делаешь, админская панель остаётся наверху. А у меня улетает в самый низ.
Наверно надо поставить стартовый сайт демо. тогда будет также улетать
html, body { height: 100%; } #page { display: flex; flex-direction: column; justify-content: space-between; height: calc(100% - 46px); } |
html, body { height: 100%; } #page { display: flex; flex-direction: column; justify-content: space-between; height: calc(100% - 46px); }
Ответы:
Не представлю как можно работать в админке на смартфоне, но для этого есть приложения Для WC и для простого WP.
- это скорее перфекционизм.
А работать естессно не буду....
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Проблема обычно не в самой админ-панели, а в том, что sticky footer сделан через жёсткое
height: 100%наhtml/body. Админбар добавляет свою высоту, особенно на мобильных, и расчёт высоты начинает конфликтовать.Лучше строить страницу не на фиксированной высоте html, а на
min-heightконтейнера сайта:html, body { margin: 0; } body { min-height: 100vh; } .site { min-height: 100vh; display: grid; grid-template-rows: auto 1fr auto; } @supports (min-height: 100dvh) { .site { min-height: 100dvh; } }
Для авторизованных пользователей с верхней панелью можно вычесть высоту admin bar:
body.admin-bar .site { min-height: calc(100vh - var(--wp-admin--admin-bar--height, 32px)); } @media (max-width: 782px) { body.admin-bar .site { min-height: calc(100vh - var(--wp-admin--admin-bar--height, 46px)); } }
Не делайте
#wpadminbar { position: fixed; }вслепую: на мобильных это часто создаёт новые проблемы с перекрытием контента. Если футер нужен “внизу экрана при малом контенте”, grid/flex на основном wrapper решает задачу чище.Проверять нужно в двух состояниях: гость без admin bar и авторизованный админ с admin bar на ширине меньше 783px.