WedX - журнал о программировании и компьютерных науках

Попытка интегрировать mmenu.js (меню вне холста) на мой сайт, возникли проблемы с моим липким нижним колонтитулом

Я пытаюсь добавить на свой сайт меню вне холста, и я выбрал mmenu(https://mmenu.frebsite.nl/index.php). Все остальное, кроме моего нижнего колонтитула, работает. У меня есть липкий нижний колонтитул на сайте, и каждый раз, когда открывается меню, нижний колонтитул вылетает из позиции.

Для фиксированного нижнего колонтитула добавьте класс mm-fixed-bottom: id="footer" class="mm-fixed-bottom">Goodbye‹

Example: https://jsfiddle.net/1eddy87/Lx5ps/1/

Я попробовал задокументированный способ, в котором говорится, что вы должны использовать «mm-fixed-bottom» для любых фиксированных элементов, однако это не сработало. 

Documentation: https://mmenu.frebsite.nl/tutorial.php

прокрутите страницу вниз, а затем откройте меню через заголовок, и вы увидите, что нижний колонтитул смещается.

Любые идеи??

Я понимаю, что использую абсолютное, а не фиксированное. Это требование для липкого нижнего колонтитула (https://mystrd.at/modern-clean-css-sticky-footer/). Я пытался исправить свой путь, надеясь, что mm-fixed-bottom сработает, однако это не сработало. Мне нужно исправить использование абсолюта.

javascript jquery css mmenu
24.02.2014

Ответы:


1

У вас есть position:absolute в нижнем колонтитуле, хотя должно быть fixed. Вы также перезаписываете CSS из mm-fixed-bottom. Я думал, что вся причина липкого нижнего колонтитула в том, что он остается внизу экрана и не двигается.

Я удалил все позиционирование, и это сработало.

https://jsfiddle.net/Lx5ps/3/

Решение найдено:

При дальнейшем осмотре похоже, что библиотека меняет <div class="mm-page"> на height:100%, что скручивается с height:auto. Я отключил его в инспекторе браузера, и он работает.

Изменено это:

html.mm-opened .mm-page {
    height: auto;
    overflow: hidden;
    position: absolute;
}

https://jsfiddle.net/Lx5ps/4/

24.02.2014
  • причина, по которой я использовал этот код, заключается в том, что это липкий нижний колонтитул, а не фиксированный нижний колонтитул, см. пример mystrd.at/modern-clean-css-sticky-footer. Я понимаю, что использую абсолютное, а не фиксированное. Это требование для липкого нижнего колонтитула. Я пытался исправить свой путь, надеясь, что mm-fixed-bottom сработает, однако это не сработало. Мне нужно исправить использование абсолюта. Извините, надо было упомянуть об этом выше 25.02.2014
  • Ах, извините, я думал, что использование слова «липкий» означает, что оно должно оставаться там. Тот, о котором вы говорите, это то, что если контент не толкает нижний колонтитул вниз, он будет выравниваться там. mm-fixed-bottom имеет position:fixed. 25.02.2014

    • 2

    У меня была такая же проблема, но я решил использовать css calc.

    html.mm-opened .mm-page {
height: -webkit-calc(100% - 320px);
height: -moz-calc(100% - 320px);
height: calc(100% - 320px);}

    320px — это высота нижнего колонтитула. Calc довольно хорошо поддерживается. См. поддержку браузера calc.

    11.06.2014
    Новые материалы
    Как создать диаграмму градиентной кисти с помощью D3.js
    Резюме: Из этого туториала Вы узнаете, как добавить градиентную кисть к диаграмме с областями в D3.js. Мы добавим градиент к значениям SVG и применим градиент в качестве заливки к диаграмме с..
    Я хотел выучить язык программирования MVC4, но не мог выучить его раньше, потому что это выглядит сложно…
    Просто начните и учитесь самостоятельно Я хотел выучить язык программирования MVC4, но не мог выучить его раньше, потому что он кажется мне сложным, и я бросил его. Это в основном инструмент..
    Лицензии с открытым исходным кодом: руководство для разработчиков и создателей
    В динамичном мире разработки программного обеспечения открытый исходный код стал мощной парадигмой, способствующей сотрудничеству, инновациям и прогрессу, движимому сообществом. В основе..
    Объяснение документов 02: BERT
    BERT представил двухступенчатую структуру обучения: предварительное обучение и тонкая настройка. Во время предварительного обучения модель обучается на неразмеченных данных с помощью..
    Как проанализировать работу вашего классификатора?
    Не всегда просто знать, какие показатели использовать С развитием глубокого обучения все больше и больше людей учатся обучать свой первый классификатор. Но как только вы закончите..
    Работа с цепями Маркова, часть 4 (Машинное обучение)
    Нелинейные цепи Маркова с агрегатором и их приложения (arXiv) Автор : Бар Лайт Аннотация: Изучаются свойства подкласса случайных процессов, называемых дискретными нелинейными цепями Маркова..
    Crazy Laravel Livewire упростил мне создание электронной коммерции (панель администратора и API) [Часть 3]
    Как вы сегодня, ребята? В этой части мы создадим CRUD для данных о продукте. Думаю, в этой части я не буду слишком много делиться теорией, но чаще буду делиться своим кодом. Потому что..
    Для любых предложений по сайту: [email protected]