Сохранение нижнего колонтитула в нижней части страницы с помощью Google MDL
Насколько я могу судить, это не дублированный вопрос, потому что он немного отличается от других вопросов по этой теме.
Я использую Google Material Design Lite, и нижний колонтитул не будет оставаться внизу страницы.
Я видел различные исправления, используя этот трюк
<div class="content">
<div class="header"></div>
<div class="body"></div>
<div class="footer"></div>
</div>
и я попытался использовать этот метод
#footer {
bottom: 0;
width: 100%;
position: absolute; (or fixed)
}
Первый вариант не работает, потому что Material Design Lite фактически использует тег footer. И, честно говоря, я вообще не хочу этого делать, потому что это кажется мне небрежным.
Метод CSS для нижнего колонтитула почти работает, но есть несколько проблем. При использовании position: absolute; он не всегда поддерживает нижний колонтитул в нижней части страницы, и иногда он охватывает контент. Когда я пытаюсь fixed, нижний колонтитул всегда хранится в нижней части страницы, но когда имеется достаточное количество содержимого для прокрутки страницы, оно остается в нижней части экрана и охватывает контент. Оба fixed и absolute будут удерживать нижний колонтитул в нижней части экрана, а не страницу, а это означает, что при наличии достаточного содержимого для прокрутки содержимого нижнего колонтитула на краю экрана.
Поведение для fixed может быть воспроизведено в 100% случаев, но для absolute я не понял, что заставляет его работать иногда, а не другие.
Это код, который у меня есть для нижнего колонтитула
<footer class="mdl-mini-footer">
<div class="mdl-mini-footer--left-section">
<button class="mdl-mini-footer--social-btn social-btn social-btn__twitter">
<span class="visuallyhidden">Twitter</span>
</button>
<button class="mdl-mini-footer--social-btn social-btn social-btn__blogger">
<span class="visuallyhidden">Facebook</span>
</button>
<button class="mdl-mini-footer--social-btn social-btn social-btn__gplus">
<span class="visuallyhidden">Google Plus</span>
</button>
</div>
<div class="mdl-mini-footer--right-section">
<button class="mdl-mini-footer--social-btn social-btn__share">
<i class="material-icons" role="presentation">share</i>
<span class="visuallyhidden">share</span>
</button>
</div>
</footer>`
У кого-нибудь еще была эта проблема или есть идеи по решению?
Изменить, чтобы добавить дополнительную информацию:
Проблема не в высоте body или html, они оба на 100%.
Полный код макета
<body>
<div class="site mdl-layout mdl-js-layout">
<header class="mdl-layout__header mdl-layout__header--waterfall">
<div class="mdl-layout__header-row">
<!-- Header Content Here -->
</div>
</header>
<div class="mdl-layout__drawer">
<!-- Drawer Content -->
</div>
<main class="mdl-layout__content">
<!-- View Content Here -->
</main>
<footer class="mdl-mini-footer">
<!-- Footer Content -->
</footer>
<div class="mdl-layout__obfuscator"></div>
</div>
</body>
Ответы
Ответ 1
Мне удалось это сделать:
1. Без заголовка водопада
- Перемещение элемента нижнего колонтитула вне основного элемента
- Задайте стиль элемента
.mdl-layout__content для "flex: 1 0 auto"
Пример:
<body>
<div class="mdl-layout mdl-js-layout">
<header class="mdl-layout__header">
...
</header>
<main class="mdl-layout__content" style="flex: 1 0 auto;">
...
</main>
<footer class="mdl-mega-footer">
...
</footer>
</div>
</body>
2. С заголовком водопада
- Просто перемещая элемент нижнего колонтитула вне основного элемента
Пример:
<body>
<div class="site mdl-layout mdl-js-layout">
<header class="mdl-layout__header mdl-layout__header--waterfall">
<div class="mdl-layout__header-row">
<!-- Header Content Here -->
</div>
</header>
<div class="mdl-layout__drawer">
<!-- Drawer Content -->
</div>
<main class="mdl-layout__content">
<!-- Main Content -->
</main>
<footer class="mdl-mini-footer">
<!-- Footer Content -->
</footer>
</div>
</body>
Тесты:
Ответ 2
У меня была та же проблема, где mdl-mini-footer перекрывал мой mdl-layout__content.
Мое решение состояло в том, чтобы разделить теги, т.е.
<main class="mdl-layout__content">
...
</main>
<footer class="mdl-mini-footer">
...
</footer>
и модифицировать классы следующим образом (беря вдохновение из первого решения @K.A.D выше)
.mdl-layout__content {
flex: 1 0 auto;
}
.mdl-mini-footer {
flex: 0 0 auto;
}
Модификация класса нижнего колонтитула была необходима, чтобы остановить нижний колонтитул, растущий в пространствах, в которые я не хотел (первый 0 в 0 0 auto).
Ответ 3
Попробуйте это
<main class="mdl-layout__content">
<div class="page-content">
</div>
<div class="mdl-layout-spacer"></div>
<footer class="mdl-mini-footer">
<div class="mdl-mini-footer__left-section">
<div class="mdl-logo">Title</div>
<ul class="mdl-mini-footer__link-list">
<li><a href="#">Help</a></li>
<li><a href="#">Privacy & Terms</a></li>
</ul>
</div>
</footer>
</main>
Просто добавьте:
<div class="mdl-layout-spacer"></div>
После:
<div class="page-content"></div>
Ответ 4
Я столкнулся с той же проблемой, что и вы. После просмотра многих руководств и двух вопросов, подобных этому, я заглянул в один из шаблонов, предоставленных MDL, и заметил, что нижний колонтитул включен в основной раздел. Я считаю, что это очень контрастно интуитивно, но элемент нижнего колонтитула должен быть указан непосредственно перед закрывающим тегом, а не после него.
См. Снимок экрана, который теперь отлично работает. Я работаю на веб-сайте TEDx GEC. Посетите веб-сайт TECX TECX, чтобы увидеть нижний колонтитул в действии. (Изменения будут добавлены 20-07-2016, любой посетитель до этого заметит, что нижний колонтитул перекрывает содержимое. Здесь снимок экрана: Обратите внимание, что основной тег закрытия после нижнего колонтитула.
