• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Как сделать липкий нижний колонтитул (Создать фиксированный липкий нижний колонтитул)
Как сделать липкий нижний колонтитул
Kosten
Дата: Суббота, 2019-07-06, 00:11 | Сообщение 1
Администраторы
Сообщений:23565
Награды: 56


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

Все го то, это как нужно правильно растянуть контейнер, и сделать так, чтоб избежать переполнения при большом количестве текста. Закрепите нижний колонтитул в нижней части окна просмотра в настольных браузерах с помощью этого пользовательского HTML и CSS.

HTML

Код
<div id="kisedam-lagunad">
  <main>
    <h1>Здесь все, кроме нижнего колонтитула</h1>
    <p>Добавьте больше текста здесь, чтобы увидеть, как реагирует нижний колонтитул!</p>
  </main>
  <footer>
    <h1>Нижний колонтитул идет сюда</h1>
  </footer>
</div>

CSS

Код
#kisedam-lagunad {
    height: 100vh;
    display: flex;
    flex-direction: column;
}

main {
  flex: auto;
}

footer {
    flex-shrink: 0;
}

* {
  margin: 0;
  font-family: Candara;
}

h1, p {
  padding: 20px;
}

footer {
  color: white;
  background: url(https://images.unsplash.com/photo-1550795598-717619d32900?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=676&q=80);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

footer > h1 {
  text-shadow: 1px 1px 3px #101010;
}


При необходимости используйте липкий нижний колонтитул с фиксированной панелью навигации. Привести нижний колонтитул в конец страниц с редким содержанием.

Демонстрация
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Как сделать липкий нижний колонтитул (Создать фиксированный липкий нижний колонтитул)
  • Страница 1 из 1
  • 1
Поиск: