Я хочу материализовать нижний колонтитул, который всегда на виду, независимо от количества контента. - PullRequest
Новая
       6

Я хочу материализовать нижний колонтитул, который всегда на виду, независимо от количества контента.

0 голосов
/ 28 июня 2018

Тело должно быть прокручиваемым, но нижний колонтитул должен быть зафиксирован. 

    <footer class="page-footer">
      <div class="container">
        <div class="row">
          <div class="col l6 s12">
            <h5 class="white-text">Footer Content</h5>
            <p class="grey-text text-lighten-4">You can use rows and columns here to organize your footer content.</p>
          </div>
          <div class="col l4 offset-l2 s12">
            <h5 class="white-text">Links</h5>
            <ul>
              <li><a class="grey-text text-lighten-3" href="#!">Link 1</a></li>
              <li><a class="grey-text text-lighten-3" href="#!">Link 2</a></li>
              <li><a class="grey-text text-lighten-3" href="#!">Link 3</a></li>
              <li><a class="grey-text text-lighten-3" href="#!">Link 4</a></li>
            </ul>
          </div>
        </div>
      </div>
      <div class="footer-copyright">
        <div class="container">
        © 2014 Copyright Text
        <a class="grey-text text-lighten-4 right" href="#!">More Links</a>
        </div>
      </div>
    </footer>

Я использовал это, но нижний колонтитул остается внизу, и я вижу его только после прокрутки всего тела. Я хочу, чтобы нижний колонтитул был всегда виден.

1 Ответ

0 голосов
/ 28 июня 2018

Если вы хотите использовать «липкий нижний колонтитул», что означает, что для ограниченного объема контента (без прокрутки) будет отображаться нижний колонтитул, вы можете перейти по ссылке, опубликованной Дейвом Хирном.

Я считаю, что ваша проблема в другом, вы хотите, чтобы нижний колонтитул отображался независимо от объема доступного контента. Вот решение: (Пожалуйста, добавьте это в ваш CSS-файл) 

body {
 display: flex;
 min-height: 100vh;
 flex-direction: column;
}

main {
 flex: 1;
}

footer{
position: fixed;
right: 0;
left: 0;
bottom: 0;
}
...