Сохранение нижнего колонтитула в нижней части страницы с помощью 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, любой посетитель до этого заметит, что нижний колонтитул перекрывает содержимое. Здесь снимок экрана: Обратите внимание, что основной тег закрытия после нижнего колонтитула.