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

Метод 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>

html css material-design-lite
person CJK    schedule 05.10.2015    source источник
comment
Вы пробовали подход css table? аналогично этому stackoverflow.com/a/28844062/483779   -  person Stickers    schedule 05.10.2015
comment
Нет, но я объяснил, почему в своем вопросе. Мне действительно нужно использовать тег нижнего колонтитула, так что это не вариант.   -  person CJK    schedule 05.10.2015
comment
Никогда раньше не использовал фреймворк, но я думаю, что часть макета может выходить за рамки. Решение для таблицы css хорошо работает с нижним колонтитулом неизвестной высоты, абсолютная или фиксированная позиция также будет работать, но требует нижнего колонтитула известной высоты, вам просто нужно добавить дополнительные отступы или поля, чтобы избежать перекрытия.   -  person Stickers    schedule 05.10.2015
comment
Нашли ли вы решение, при котором нижний колонтитул не остается постоянно видимым в нижней части окна? Сейчас я использую другой макет: чтобы заполнить оставшееся пространство под нижним колонтитулом тем же цветом, что и нижний колонтитул.   -  person Ferran Maylinch    schedule 15.04.2016

Ответы (4)


arrow_upward
34
arrow_downward

Мне удалось это сделать:

1. Без коллектора водопада

  1. Перемещение элемента нижнего колонтитула за пределы основного элемента
  2. Установите стиль элемента .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. С заголовком-водопадом

  1. Просто переместив элемент нижнего колонтитула за пределы основного элемента

Пример:

  <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>

Тесты:

person K.A.D.    schedule 27.10.2015
comment
Одна из проблем заключалась в том, что заголовок водопада не прикреплялся к верхней части экрана после добавления гибкого стиля к тегу mdl-layout__content, но это удерживает нижний колонтитул внизу страницы, так что это хорошее начало. - person CJK; 28.10.2015
comment
Я использую те же стили для своей страницы, и у меня нет проблем с заголовком. Какой шаблон MDL вы используете? - person K.A.D.; 29.10.2015
comment
Код добавлен. Дайте мне знать, если вы видите какие-либо проблемы - person CJK; 31.10.2015
comment
@CJK: вы не можете напрямую применить фиксированную позицию к заголовку? - person K.A.D.; 02.04.2016
comment
@CJK: спасибо, что не приняли ответ, в вашем случае вам не нужно добавлять style="flex: 1 0 auto;", поскольку вы используете каскадный заголовок. См. следующий пример: codepen.io/kabudahab/pen/JXpmpv. - person K.A.D.; 12.04.2016
comment
Спасибо, я попробую это - person CJK; 12.04.2016
comment
Это решение позволяет постоянно видеть нижний колонтитул. Как это может отображаться (внизу) только тогда, когда содержимое короткое? Является ли взлом таблицы CSS единственным вариантом? - person Ferran Maylinch; 15.04.2016

arrow_upward
5
arrow_downward

У меня была такая же проблема, когда mdl-mini-footer перекрывался с моим mdl-layout__content.

Мое решение состояло в том, чтобы хранить теги отдельно, т.е.

<main class="mdl-layout__content">
  ...
</main>
<footer class="mdl-mini-footer">
  ...
</footer>

и измените классы следующим образом (черпая вдохновение из первого решения @KAD выше)

.mdl-layout__content {
  flex: 1 0 auto;
}

.mdl-mini-footer {
  flex: 0 0 auto;
}

Модификация класса нижнего колонтитула была необходима, чтобы нижний колонтитул не разрастался в места, которые я не хотел (первый 0 в 0 0 auto).

person mattsch    schedule 24.05.2017

arrow_upward
2
arrow_downward

Попробуй это

    <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>
person Grandong    schedule 15.05.2016

arrow_upward
0
arrow_downward

Я столкнулся с той же проблемой, что и вы. После просмотра множества руководств и двух подобных вопросов я взглянул на один из шаблонов, предоставленных MDL, и заметил, что нижний колонтитул включен в основной раздел. Я нахожу это очень нелогичным, но элемент нижнего колонтитула должен быть указан непосредственно перед закрывающим тегом, а НЕ после него. Посмотрите на скриншот разметки, которая теперь работает нормально. Я работаю над веб-сайтом TEDx GEC.Посетите веб-сайт tedx GEC, чтобы увидеть нижний колонтитул в действии. (изменения будут загружены 20-07-2016, любой, кто зашел до этого, заметит, что нижний колонтитул перекрывает контент. Вот скриншот: Обратите внимание, что закрывающий основной тег находится после нижнего колонтитула.

person Saheel Wagh    schedule 18.07.2016