• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Прижать футер к низу страницы сайта на CSS (Как при помощи CSS прижать footer к низу окна браузера)
Прижать футер к низу страницы сайта на CSS
Kosten
Дата: Четверг, 2019-09-12, 03:17 | Сообщение 1
Оффлайн
Администраторы
Сообщений:24686
Награды: 57


Не секрет, что один самый распространённых вариантов, как можно прижатия футера к низу страницы. Где рассмотрим несколько вариантов, это как приклеить нижний колонтитул к нижней части страницы. Привести нижний колонтитул в конец страниц с редким содержанием — это то, что каждый веб-разработчик пытался решить по своему варианту.

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

Для этого вашему вниманию 5 способов прижимания футера к низу окна браузера с помощью CSS. Где HTML-код представлен для всех вариантов для CSS.

HTML

Код
<html>
<body>

<div class="wrapper">

    <div class="content"></div>

    <div class="footer"></div>

</div>

</body>
</html>

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

Первый способ

CSS

Код
* {
    margin: 0;
    padding: 0;
}
html,
body {
    height: 100%;
}
.wrapper {
    position: relative;
    min-height: 100%;
}
.content {
    padding-bottom: 90px;
}
.footer {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 80px;
}

Второй способ

Footer прижимается вниз за счет вытягивания блока контента и его «родителей» на всю высоту окна браузера и подъема футера вверх через отрицательный отступ (margin-top) для избавления от появляющегося при этом вертикального скролла

CSS

Код
* {
    margin: 0;
    padding: 0;
}
html,
body,
.wrapper {
    height: 100%;
}
.content {
    box-sizing: border-box;
    min-height: 100%;
    padding-bottom: 90px;
}
.footer {
    height: 80px;
    margin-top: -80px;
}

Благодаря свойству box-sizing: border-box, мы не позволяем блоку с классом .content превысить высоту 100%. То есть в данном случае min-height: 100% + padding-bottom: 90px равняется 100% высоты окна браузера.

Третий способ

Код
* {
    margin: 0;
    padding: 0;
}
html,
body {
    height: 100%;
}
.wrapper {
    display: table;
    height: 100%;
}
.content {
    display: table-row;
    height: 100%;
}

Здесь мы эмулируем поведение таблицы, превратив блок .wrapper в таблицу, а блок .content в строку таблицы (свойства display: table и display: table-row соответственно).

Четвертый способ

Данный способ не похож ни на один из предыдущих, и его особенность заключается в использовании CSS-функции calc() и единицы измерения vh, которые поддерживаются только современными браузерами. Здесь необходимо знать точную высоту подвала

Код
* {
    margin: 0;
    padding: 0;
}
.content {
    min-height: calc(100vh - 80px);
}

100vh — это высота окна браузера, а 80px — это высота футера. И с помощью функции calc() мы вычитаем вторую величину из первой, тем самым прижимая футер к низу.

Пятый способ (самый актуальный)

Это лучший способ из всех представленных, однако работает он только в современных браузерах. Как и в третьем способе, высота футера значения не имеет.

Код
* {
    margin: 0;
    padding: 0;
}
html,
body {
    height: 100%;
}
.wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}
.content {
    flex: 1 0 auto;
}
.footer {
    flex: 0 0 auto;
}

В какой-то момент проекта вас раздражает нижний колонтитул, зависший прямо под заголовком, потому что еще нет содержимого, чтобы заполнить пространство. Также могут быть некоторые действительно короткие страницы (например, 404), которые могут быть недостаточно длинными, чтобы заполнить весь браузер.
Страна: (RU)
Kosten
Дата: Четверг, 2019-09-12, 03:20 | Сообщение 2
Оффлайн
Администраторы
Сообщений:24686
Награды: 57


Наверное самый распространённый способ прижатия футера к низу страницы.

HTML

Код
<body>
    <div class="wrapper">
        Шапка
        Контент
        Колонки
        <div class="footer-push"></div>
    </div>
    <div class="footer">
        Подвал
    </div>
</body>

CSS

Код
html, body {
height: 100%;
margin: 0;
padding: 0;
}

.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 0 -100px 0; /* отрицательный нижний отступ на высоту футера */
    padding: 0;
}
.footer-push, .footer {
    height: 100px;
    margin: 0;
    padding: 0;
}

Работает во всех браузерах.

Единственное момент — у body и футера нельзя указывать положительные верхний или нижний margin/padding.
Страна: (RU)
Kosten
Дата: Четверг, 2019-09-12, 03:28 | Сообщение 3
Оффлайн
Администраторы
Сообщений:24686
Награды: 57


Верхний / нижний колонтитул

Параллакс Эффект

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

HTML

Код
<div id="scroll-animate">
  <div id="scroll-animate-main">
    <div class="wrapper-parallax">
      <header>
        <h1>Header</h1>
      </header>

      <section class="content">
        <h1>Content</h1>
      </section>

      <footer>
        <h1>Footer</h1>
      </footer>
    </div>
  </div>
</div>

CSS

Код
#scroll-animate
{
  overflow: hidden;
}

#scroll-animate-main
{
  width: 100%;
  left: 0;
  position: fixed;
}

#heightPage,
#heightScroll
{
  width: 10px;
  top: 0;
  position: absolute;
  z-index: 99;
}

#heightPage
{
  left: 0;
}

#heightScroll
{
  right: 0;
}

header
{
  width: 100%;
  height: 100%;
  background: url(https://raw.githubusercontent.com/hudsonmarinho/header-and-footer-parallax-effect/master/assets/images/bg-header.jpg) no-repeat 50% 50%;
  top: 0;
  position: fixed;
  z-index: -1;
}

footer
{
  width: 100%;
  height: 300px;
  background: gray;
  bottom: -300px;
  position: fixed;
  z-index: -1;
}

.content
{
  height: 1000px;
  min-height: 1000px;
  background: #ededed;
  position: relative;
  z-index: 1;
}

.wrapper-parallax {
  margin-top: 100%;
  margin-bottom: 300px;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5);
}

h1{
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  text-transform: uppercase;
  text-align: center;
  font-family: Helvetica;
  font-size: 150px;
  color: #fff;
}

header h1{}

.content h1{
  line-height: 1000px;
  color: #999;
}

footer h1
{
  line-height: 300px;
}

header,
footer,
#scroll-animate-main
{
  -webkit-transition-property: all;
     -moz-transition-property: all;
      transition-property: all;

  -webkit-transition-duration: 0.4s;
     -moz-transition-duration: 0.4s;
      transition-duration: 0.4s;

  -webkit-transition-timing-function: cubic-bezier(0, 0, 0, 1);
     -moz-transition-timing-function: cubic-bezier(0, 0, 0, 1);
      transition-timing-function: cubic-bezier(0, 0, 0, 1);
}

JS

Код
function scrollFooter(scrollY, heightFooter)
{
    console.log(scrollY);
    console.log(heightFooter);

    if(scrollY >= heightFooter)
    {
        $('footer').css({
            'bottom' : '0px'
        });
    }
    else
    {
        $('footer').css({
            'bottom' : '-' + heightFooter + 'px'
        });
    }
}

$(window).load(function(){
    var windowHeight        = $(window).height(),
        footerHeight        = $('footer').height(),
        heightDocument      = (windowHeight) + ($('.content').height()) + ($('footer').height()) - 20;

    // Definindo o tamanho do elemento pra animar
    $('#scroll-animate, #scroll-animate-main').css({
        'height' :  heightDocument + 'px'
    });

    // Definindo o tamanho dos elementos header e conteúdo
    $('header').css({
        'height' : windowHeight + 'px',
        'line-height' : windowHeight + 'px'
    });

    $('.wrapper-parallax').css({
        'margin-top' : windowHeight + 'px'
    });

    scrollFooter(window.scrollY, footerHeight);

    // ao dar rolagem
    window.onscroll = function(){
        var scroll = window.scrollY;

        $('#scroll-animate-main').css({
            'top' : '-' + scroll + 'px'
        });
        
        $('header').css({
            'background-position-y' : 50 - (scroll * 100 / heightDocument) + '%'
        });

        scrollFooter(scroll, footerHeight);
    }
});

Это вероятно немного упрощено по сравнению с некоторыми реальными проектами. Важно сохранить основную область содержимого (основной) и нижний колонтитул (нижний колонтитул) в одном родительском элементе.

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