Как сохранить нижний колонтитул там, где ему положено?

1656583929 kak sohranit nizhnij kolontitul tam gde emu polozheno

Нижний колонтитул – последний элемент на странице. Как минимум, он находится внизу области просмотра или ниже, если содержимое страницы выше области просмотра. Просто, верно? ?

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

Чтобы быстро решить проблему, вы можете полностью разместить нижний колонтитул внизу страницы. Но у этого есть свой недостаток. Если содержимое произрастает больше, чем область просмотра, нижний колонтитул останется «прилипнутым» к нижней части окна просмотра, хотим мы этого или нет.

Это показывает поведение, которое мы не хотим и хотим:

CmSel82bidnUEBQ5fnl1aWwQlwmj4h2eO0WI

Давайте рассмотрим подход к достижению этого.

index.html:

<!DOCTYPE html>

<html>
 <head>
   <link rel="stylesheet" type="text/css" href=" />
 </head>

<body>
 <div id="page-container">
   <div id="content-wrap">
     <!-- all other page content -->
   </div>
   <footer id="footer"></footer>
 </div>
</body>

</html>

main.css:

#page-container {
  position: relative;
  min-height: 100vh;
}

#content-wrap {
  padding-bottom: 2.5rem;    /* Footer height */
}

#footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 2.5rem;            /* Footer height */
}

Итак, что это делает?

  • The page-container обходит все на странице и устанавливает минимальную высоту на 100% высоты окна просмотра (vh). Так как есть relativeего дочерние элементы можно установить с помощью absolute позицию на ее основе позже.
  • The content-wrap имеет нижнюю прокладку, соответствующую высоте нижнего колонтитула, что обеспечивает достаточное место для нижнего колонтитула внутри контейнера, в котором они оба. Обертка div здесь используется, которое содержало бы все остальное содержимое страницы.
  • The footer установлено на absoluteпридерживаясь bottom: 0 с page-container это внутри. Это важно, поскольку это не так absolute к окну просмотра, но переместится вниз, если page-container выше области просмотра. Как указано, его высота произвольно установлена 2.5rem здесь используется в content-wrap над ним.

И вот оно. Теперь ваш нижний колонтитул остается там, где вы ожидали!

Последние штрихи

Конечно, это CSS, поэтому он не был бы полон без некоторых соображений UX для мобильных устройств и альтернативного подхода с использованием min-height: 100% а не 100vh. Но у этого есть свои недостатки.

Flexbox (с flex-grow) или Grid также можно использовать, и оба они очень мощны.

Какой способ выбрать зависит исключительно от вас и особенностей вашего дизайна. Надеемся, приведенный выше пример и ссылки помогут вам сэкономить время на принятии решения и его реализации.

Спасибо, что прочли. Вот несколько других вещей, которые я написал недавно:

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *