Создать липкий нижний колонтитул на CSS - Форум

Новые сообщения
Участники
Правила форума
Поиск
RSS

Страница 1 из 1
1

Форум » Web-Раздел » Начинающему вебмастеру » Создать липкий нижний колонтитул на CSS (Лучший способ сделать липкие нижние колонтитулы)

Создать липкий нижний колонтитул на CSS

Kosten

Суббота, 07 Июля 2018 | Сообщение 1

Администраторы

Сообщений:44342

Награды: 70

« 555 »

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

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

И так начнем:

HTML

Код

CSS

Код

html {
     height : 100% ;
} body {
     display : flex;
    flex-direction : column;
    высота : 100% ;
}

flex-grow - отвечает за свободное пространство.
flex-shrink - Сокращение элемента под размер экрана.
flex-basis - Здесь идет изначальный размер.

Код

header{
   flex: 0 0 auto;
}

.main-content{
   flex: 1 0 auto;
}

footer{
   flex: 0 0 auto;
}

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

Скачав архив, вы найдете полный материал по установке.

Демонстрация

Прикрепления: 8784625.jpg (37.1 Kb) · quick-tip-stick.zip (357.6 Kb)

Страна: (RU)

Kosten

Суббота, 07 Июля 2018 | Сообщение 2

Администраторы

Сообщений:44342

Награды: 70

« 555 »

Прежде всего, вы должны решить, как будет отображаться ваш липкий нижний колонтитул, то есть как он будет вести себя на вашей странице. Для целей этого урока я предполагаю, что для вашего нижнего колонтитула обычно существуют два варианта: 1, нижний колонтитул может придерживаться нижней части тела вашей страницы.

Меняя положение в соответствии с высотой тела вашей страницы, или 2, он может придерживаться нижней части окна вашего браузера, эффективно превращая нижний колонтитул в качестве вездесущего объекта на странице. Оба они относительно легко достижимы и имеют определенные преимущества и недостатки по сравнению с другими.

В конечном итоге выбор за вами.

Шаг 1: Поведение и позиционирование

Вот как прикрепить нижний колонтитул к нижней части тела:

HTML

Код

<footer id="disadvantages">Липкий нижний колонтитул</footer>

CSS

Код

#disadvantages {
    width: 100%;
    height: 53px;
    padding-top: 18px;
    background: #252424;
    color: #efecec;
    font-weight: bold;
    font-size: 25px;
    text-align: center;
    position: absolute;
    bottom: 0;
    left: 0;
}

Демонстрация

2. Вариант:

Важно отметить: 1 - тело имеет relative позиционирование 2 - липкий нижний колонтитул имеет absolute позиционирование и определенную ширину 3 - bottom свойство для липкого нижнего колонтитула установлено 0.

Вот как установить нижний колонтитул в нижней части окна вашего браузера:

HTML

Код

<footer id="absolute-positioning">Липкий нижний колонтитул</footer>

CSS

Код

#absolute-positioning {
    width: 100%;
    height: 53px;
    padding-top: 23px;
    background: #212020;
    color: #fbf8f8;
    font-weight: bold;
    font-size: 26px;
    text-align: center;
    position: fixed;
    bottom: 0;
    left: 0;
}

Что нужно отметить: 1 - тело все еще имеет relative позиционирование 2 липкий нижний колонтитул теперь имеет fixed позиционирование и определенную ширину 3 - bottom свойство для липкого нижнего колонтитула все еще установлено 0.

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

Демонстрация

Прикрепления: 7672497.png (3.4 Kb)

Страна: (RU)

Kosten

Суббота, 07 Июля 2018 | Сообщение 3

Администраторы

Сообщений:44342

Награды: 70

« 555 »

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

Что мы можем сделать? Мы можем добавить некоторые причудливые эффекты в наш нижний колонтитул, вот что мы можем сделать. Давайте рассмотрим несколько относительно простых эффектов, которые вы можете добавить в нижний колонтитул, чтобы действительно привлечь к себе внимание.

Если вы хотите относительно скромный подход, есть теневые эффекты.

HTML

Код

<footer id="tobuilda-responsive">ZorNet.Ru: Портал Вебмастера - 2018</footer>

CSS

Код

#tobuilda-responsive {
    width: 100%;
    padding: 23px;
    padding-bottom: 18px;
    background: #272626;
    color: #f3ecec;
    font-weight: bold;
    font-size: 19px;
    text-align: center;
    position: fixed;
    bottom: 0;
    left: 0;
    border-top: 1px solid whitesmoke;
    box-shadow: 0 -5px 35px;
    box-shadow: 0px -9px 10px rgba(113, 106, 106, 0.31), 0px -12px 30px -15px rgba(31, 29, 29, 0.4);
}

Демонстрация

Прикрепления: 3624058.png (3.4 Kb)

Страна: (RU)

Страница 1 из 1
1