Как изменить размер footer html
Перейти к содержимому

Как изменить размер footer html

  • автор:

Шлифуем футер

Вот мы и освоили основные CSS-свойства для оформления текста. Наш сайт почти полностью оформлен.

Давайте ещё сделаем последний штрих и добавим стилизацию к подвалу сайта. Для этого мы используем уже известные вам свойства: color , border и padding .

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

Перейти к заданию

  • index.html Сплит-режим
  • style.css Сплит-режим
  • ты делаешь полезное дело
  • можешь работать удалённо
  • интересные люди
  • хорошая зарплата

Как создать статический футер с помощью HTML и CSS

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

Примечание: Найти все мануалы этой серии можно по тегу CSS-practice

Для работы с CSS вам нужно иметь базовые знания по HTML, стандартному языку разметки, который используется для отображения документов в браузере. Если ранее вы не работали с HTML, рекомендуем предварительно изучить первые десять руководств серии Создание веб-сайта с помощью HTML.

В последнем мануале этой серии по CSS мы поговорим о том, как создать статический футер и зафиксировать его (он будет оставаться в нижней части области просмотра, когда посетитель прокручивает страницу вниз).

Методы, которые использованы здесь, можно применить к любым другим проектам, разработанным на CSS и HTML.

Требования

Чтобы выполнить эти инструкции, вам следует подготовит среду согласно мануалу Подготовка проекта CSS и HTML с помощью Visual Studio Code.

В качестве контента для футера мы используем несколько значков социальных сетей. Если вы тоже хотите использовать эти значки, загрузите их и сохраните в папке images как:

Примечание: Чтобы загрузить изображение, перейдите по нужной вам ссылке, нажмите Ctrl и кликните левой кнопкой (на Mac) или правой кнопкой мыши (в Windows) по изображению, выберите «Сохранить изображение как» и сохраните его в своей папке images. Сохраните изображения с указанными именами.

После этого вы можете приступать к работе.

Создание класса для оформления футера

Сначала мы определим класс footer, добавив следующий фрагмент кода в конец файла styles.css:

Сохраните файл styles.css. Как всегда, новый раздел кода начинается с комментария (/* Footer */). Затем мы определяем класс footer и объявляем несколько правил стиля. Первое правило объявляет параметр position со значением fixed, что означает, что элемент не будет перемещаться из указанного вами расположения, когда пользователь будет прокручивать страницу вниз. Это расположение задается следующими двумя объявлениями: bottom:0 и left:0 – 0 пикселей слева и 0 пикселей снизу области просмотра браузера.

Откорректировав эти значения, вы можете изменить расположение элемента на странице. Однако помните: любое значение, кроме нуля, должно включать суффикс px после числа. В наборе правил также указаны ширина, высота и цвет фона класса footer.

Добавление футера на страницу

Чтобы добавить контент для футера, мы создадим новый контейнер

и присвоим ему только что созданный класс footer. Вернитесь в файл index.html и вставьте следующий фрагмент кода после последнего закрывающего тега

:

Сохраните файл index.html и загрузите его в браузере.

Если вы не знаете, как открыть оффлайн-файл, обратитесь к нашему руководству Основы работы с html-элементами (раздел Просмотр оффлайн HTML-файла в браузере).

На экране будет пустой контейнер для футера, который остается на месте при прокрутке страницы вверх и вниз.

Теперь можно добавить контент – сделаем это в следующем разделе руководства.

Добавление и оформление контента футера

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

Вернитесь к styles.css и добавьте следующий фрагмент кода в конец файла:

Давайте подробно рассмотрим каждый из созданных нами наборов правил:

  • Первый набор определяет класс footer-text-left, который будет использоваться для стилизации текста меню. Обратите внимание, свойство float имеет значение left – следовательно, текст, оформленный по этому классу, будет размещен в левой части страницы. Свойство word-spacing предоставляет дополнительное пространство между элементами меню. Однако если какой-либо из пунктов вашего меню состоит из более чем одного слова, вам нужно создать класс для стилизации пунктов меню (недостаточно просто изменить значение интервала между словами).
  • Второй набор правил использует псевдокласс hover, чтобы сделать желтым цвет фона того текста, на который пользователь наводит курсор.

Теперь давайте пропишем в файле index.html пункты меню. Вставьте следующий выделенный фрагмент кода в контейнер footer, который вы создали ранее:

Этот фрагмент кода добавляет два элемента меню (about и credits), связывает эти элементы и стилизует текст с помощью только что созданных классов footer-text-left и a.menu.

Сохраните оба файла и перезагрузите веб-страницу в браузере. В левой части закрепленного футера появится три пункта меню: home, about и credits. При наведении на них фон будет менять свой цвет на желтый.

Добавление значков социальных сетей

Давайте добавим в наш футер значки социальных сетей, которые можно использовать для ссылки на свои учетные записи. Если вы хотите использовать значки для других соцсетей, вы можете найти их бесплатные логотипы в Интернете и загрузить их в папку images, а затем добавить на свою страницу. Откройте styles.css и вставьте следующие три набора правил в конец файла:

Остановимся на этих правилах подробнее:

  • Первый набор правил определяет класс footer-content-right и присваивает определенные значения его внутренним полям, внешним отступам и выравниванию (padding, margin и float соответственно). Этот набор правил нужен для стилизации элемента , который будет содержать значки социальных сетей.
  • Второй набор создает класс icon-style, который задает высоту и внешние поля для значков социальных сетей, учитывая их размер и расположение.
  • Третий набор правил использует псевдокласс hover, что изменит цвет фона значка на желтый при наведении курсора.

Github icon

Twitter icon

Emailicon

Примечание: Не забудьте заменить нашу ссылку в коде ссылками на свои соцсети. При необходимости откорректируйте пути к файлам.

Этот фрагмент кода создает контейнер , которому присваивается класс footer-content-right. Внутри этого контейнера div находятся три значка социальных сетей, вставленные с помощью HTML-тега ; с помощью тега HTML каждое изображение поддерживает ссылку на соответствующую соцсеть.

Также мы добавили атрибут alt – это альтернативный текст, описывающий каждый значок. При создании веб-сайтов альтернативный текст следует добавлять ко всем изображениям, чтобы обеспечить доступность сайта для людей, использующих скринридеры. Чтобы узнать больше об использовании альтернативного текста с HTML, читайте мануал Добавление изображения на веб-страницу с помощью HTML.

Сохраните файл index.html и перезагрузите его в браузере. Теперь на вашей странице должен быть зафиксированный футер, содержащий в правой части ссылки на ваши социальные сети. Ссылки должны менять цвет фона при наведении на них курсора.

Заключение

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

Поздравляем, работа над тестовым сайтом завершена! Теперь вы знаете, как стилизовать HTML-элементы с помощью определения классов и псевдоклассов CSS. Вы также ознакомились с несколькими вариантами верстки сайта, которые можно реализовать через различные HTML-элементы и CSSстили.

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

Для практики попробуйте изменить что-нибудь на веб-сайте, который у вас получился. Вот пара идей, которые могут вас заинтересовать:

  • Персонализируйте текстовый и графический контент на вашем сайте. Если вам нужно освежить в памяти, как работать с изображениями, читайте туториалы Добавление изображения на веб-страницу с помощью HTML или Стилизация изображений CSS.
  • Создайте новые веб-страницы и ссылки. Сделать это вам поможет наше руководство Добавление страниц сайта с помощью HTML
  • Добавьте фавикон с помощью этого мануала.
  • Изучите блоковую модель CSS и научитесь работать с ее компонентами по статьям Блоковая модель CSS: настройка контента, внутренних полей, рамок и внешних отступов HTML-элементов и Создание плиточного макета с помощью CSS.
  • Измените порядок разделов вашего тестового веб-сайта, отредактируйте классы для оформления этих разделов.
  • Измените фоновое изображение .
  • Измените цвет фона, используемый в различных элементах , поработайте над цветовой палитрой сайта.

Как прижать footer к низу экрана?

Есть основной блок

с контентом различной высоты, а под ним размещён футер. Если контент не достигает всей высоты экрана, нужно чтобы блок .container занимал всё свободное место окна браузера. При этом футер должен быть внизу страницы и оставаться видимым. Футер может менять высоту, но при этом он должен оставаться прижатым к нижнему краю окна браузера.

.container
  
header
content
footer

Отслеживать
7,319 5 5 золотых знаков 28 28 серебряных знаков 72 72 бронзовых знака
задан 20 июл 2016 в 7:47
757 1 1 золотой знак 6 6 серебряных знаков 10 10 бронзовых знаков
Пробовали использовать media queries? developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/…
20 июл 2016 в 9:35
Возможный дубликат вопроса: Подвал не фиксированной высоты прижатый к низу экрана
20 июл 2016 в 9:54
Это дубликат вопроса, а не наоборот.
6 янв 2017 в 15:55

я так понимаю, что у Вас должен контент постоянно меняться, в зависимости от выбранных вкладок в каком-то меню. Я тоже сталкивался с моментами, когда нужно было, чтоб футер четко был внизу при , практически пустом контенте (даже немного скролил). Я такой момент решал бонально просто: в своем файле css я ставил .content < min-height: 600px; >( ну или 500-700px в зависимости от того какой высоты у Вас хедер, просто просчитываете контент). Я не говорю, что это решение оригинальное, но в своих проектах я его использовал и мне это не доставляло неудобств в дальнейшем.

9 апр 2017 в 19:22

9 ответов 9

Сортировка: Сброс на вариант по умолчанию

Для прижатия футера к низу экрана, есть несколько решений. Ниже представлены варианты от самого актуального до устаревшего:

1. Решение через Grid Layout для АДАПТИВНОЙ высоты футера

html < height: 100%; >body < margin: 0; color: #fff; /* Растягиваем body по высоте html */ min-height: 100%; display: grid; grid-template-rows: auto 1fr auto; >header < background: blue; >main < background: red; >footer
 
header
content
footer

2. Решение через Flexbox для АДАПТИВНОЙ высоты футера

body < margin: 0; color: #fff; display: flex; flex-direction: column; min-height: 100vh; >header < background: blue; >main < /* Чтобы занимал оставшееся пространство */ flex-grow: 1; background: red; >footer < /* Чтобы footer не уменьшался */ flex-shrink: 0; background: black; >
 
header
content
footer

3. Решение через таблицы для АДАПТИВНОЙ высоты футера

body < margin: 0; color: #fff; display: table; min-height: 100vh; width: 100%; >header < background: blue; >main < display: table-row; /* Чтобы ряд занимал всё оставшееся пространство, так как табличная разметка не позволит ему вытолкнуть header и footer */ height: 100%; background: red; >footer
 
header
content
footer

4. Решение на нативном JavaScript для АДАПТИВНОЙ высоты футера

// Высчитываем высоту footer и делаем соответствующий отступ от main: function footer() < const main = document.getElementsByTagName('main')[0], footer = document.getElementsByTagName('footer')[0] main.style.paddingBottom = footer.clientHeight + 'px' >window.addEventListener('load', footer); window.addEventListener('resize', footer);
html < /* Растягиваем документ на всю высоту окна */ height: 100%; >body < position: relative; margin: 0; color: #fff; /* Растягиваем body по высоте html */ min-height: 100%; >header < background: blue; >main < /* Выставляем отступ с высотой footer по умолчанию */ padding-bottom: 30px; background: red; >footer < /* Позиционируем footer внизу main */ position: absolute; bottom: 0; width: 100%; /* Высота footer по умолчанию */ height: 30px; background: black; >
 
header
content
footer

5. Решение через calc() для ФИКСИРОВАННОЙ высоты футера

html < /* Растягиваем документ на всю высоту окна */ height: 100%; >body < position: relative; margin: 0; color: #fff; /* Растягиваем body по высоте html */ min-height: 100%; >header < background: blue; >main < /* Выставляем отступ с высотой footer и header */ min-height: calc(100vh - 30px - 18px); background: red; >footer < /* Высота footer */ height: 30px; background: black; >
 
header
content
footer

6. Решение через абсолютное позиционирование для ФИКСИРОВАННОЙ высоты футера

html < /* Растягиваем документ на всю высоту окна */ height: 100%; >body < position: relative; margin: 0; color: #fff; /* Растягиваем body по высоте html */ min-height: 100%; >header < background: blue; >main < /* Выставляем отступ с высотой footer */ padding-bottom: 30px; background: red; >footer < /* Позиционируем footer внизу main */ position: absolute; bottom: 0; width: 100%; /* Высота footer */ height: 30px; background: black; >
 
header
content
footer

Отслеживать
ответ дан 2 янв 2017 в 11:11
MobiDevices.com MobiDevices.com
7,319 5 5 золотых знаков 28 28 серебряных знаков 72 72 бронзовых знака

Если надо чтобы решение на Flexbox работало в IE, то я у себя в ответе в секции Internet Explorer есть решение.

27 мая 2018 в 19:47

Также приведенное решение на CSS Grid Layout негибкое (требует фиксированной высоты) и не работает в IE 10/11, что исправлено в моём ответе.

27 мая 2018 в 20:08

Решение на flexbox .

Более универсальное в плане сопровождаемости, так как не требует задания фиксированной высоты и хаков с position: absolute . Если вам требуется также поддерживать IE 10/11, то решение включающее их поддержку находится в секции «Flexbox для Internet Explorer 10/11».

Случай с контентом на всю оставшуюся высоту:

body < min-height: 100vh; margin: 0; display: flex; flex-direction: column; >.content < /* Занять всё оставшееся пространство */ flex-grow: 1; border: 1px dotted red; >
 
header
content
footer

Если надо чтобы был отступ от контента, но контент не занимал всю высоту, то используйте margin-top: auto для footer :

body < min-height: 100vh; margin: 0; display: flex; flex-direction: column; >.content < border: 1px dotted red; >footer < /* Опустить в самый низ */ margin-top: auto; >
 
header
content
footer

Flexbox для Internet Explorer 10/11

Для того, чтобы описанные выше способы заработали в IE 10/11 нужно помнить о следующих багах браузеров:

  • min-height не применяется к элементу с display: flex и flex-direction: column в IE 10-11. Используйте height где это возможно.
  • Chrome, Opera, and Safari не учитывают минимальный размер контента непосредственных детей контейнера c display: flex . Установите flex-shrink в 0 (вместо значения по умолчанию 1 ) чтобы избежать нежелательного «сжатия».

Случай с контентом на всю оставшуюся высоту:

body < height: 100vh; margin: 0; display: flex; flex-direction: column; >header, footer < flex-shrink: 0; >.content < /* Занять всё оставшееся пространство */ flex-grow: 1; border: 1px dotted red; >
 
header
content
footer

Если надо чтобы был отступ от контента:

body < height: 100vh; margin: 0; display: flex; flex-direction: column; >header, footer < flex-shrink: 0; >.content < border: 1px dotted red; >footer < /* Опустить в самый низ */ margin-top: auto; >
 
header
content
footer

CSS Grid Layout

Случай с контентом на всю оставшуюся высоту:

body < height: 100vh; margin: 0; display: grid; /* задаём высоту строк */ grid-template-rows: auto 1fr auto; >.content
 
header
content
footer

Если надо чтобы был отступ от контента, но контент не занимал всю высоту, то используйте align-self: start для footer :

body < min-height: 100vh; margin: 0; display: grid; /* задаём высоту строк */ grid-template-rows: auto 1fr auto; >.content < /* кладём элемент в начало ячейки по вертикали */ /* чтобы его высота была равна высоте контента */ align-self: start; border: 1px dotted red; >
 
header
content
footer

CSS Grid Layout для Internet Explorer 10/11

В Internet Explorer 10/11 реализована устаревшая версия модуля CSS Grid Layout. С практической точки зрения это значит, что реализация этого модуля очень сильно разнится от остальных браузеров, которые поддерживают данный модуль.

Самое главное, о чём нужно помнить, что в IE элементы не располагаются по умолчанию по свободным ячейкам по порядку, а просто кладутся друг на друга в самую первую ячейку. То есть в других браузерах значения по умолчанию grid-row : auto и grid-column: auto , тогда как в IE -ms-grid-row : 1 и -ms-column: 1 , поэтому если номер строки или стоблца элемента не совпадают с 1 , то придётся их прописывать по другому.

Оставльное — более тривиально. Часть свойств не поддерживаются (вроде grid-areas , grid-gap и т.д.), часть называются по другому или требуется другой синтаксис и могут иметь отличные умолчания.

Случай с контентом на всю оставшуюся высоту:

body < height: 100vh; margin: 0; display: -ms-grid; display: grid; /* по умолчанию в IE размер ячеек равен содержимому, */ /* тогда как в других браузерах размер ячеек растягивается */ /* под свобоодное пространство grid-контейера */ -ms-grid-columns: 100%; /* задаём высоту строк */ -ms-grid-rows: auto 1fr auto; grid-template-rows: auto 1fr auto; >.content < /* явно прописываем номер строки, когда она не равна 1 */ -ms-grid-row: 2; border: 1px dotted red; >footer < /* явно прописываем номер строки, когда она не равна 1 */ -ms-grid-row: 3; >
 
header
content
footer

Если надо чтобы был отступ от контента, но контент не занимал всю высоту, то используйте align-self: start и -ms-grid-row-align: start для footer :

body < height: 100vh; margin: 0; display: -ms-grid; display: grid; /* по умолчанию в IE размер ячеек равен содержимому, */ /* тогда как в других браузерах размер ячеек растягивается */ /* под свобоодное пространство grid-контейера */ -ms-grid-columns: 100%; /* задаём высоту строк, разные имена свойств */ -ms-grid-rows: auto 1fr auto; grid-template-rows: auto 1fr auto; >.content < /* явно прописываем номер строки, когда она не равна 1 */ -ms-grid-row: 2; /* кладём элемент в начало ячейки по вертикали */ /* чтобы его высота была равна высоте контента */ -ms-grid-row-align: start; align-self: start; border: 1px dotted red; >footer < /* явно прописываем номер строки, когда она не равна 1 */ -ms-grid-row: 3; >.content < -ms-grid-row: 2; border: 1px dotted red; >footer
 
header
content
footer

Отслеживать
ответ дан 2 янв 2017 в 12:26
Vadim Ovchinnikov Vadim Ovchinnikov
9,634 4 4 золотых знака 35 35 серебряных знаков 73 73 бронзовых знака

Можно ещё так, с проверкой (если мало контента, то фиксировать, иначе статика):

if( $(document).height()
.page-footer < padding: 1rem; background: #333; color: #fff; text-align: center; >.page-footer.fixed-bottom
 

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, harum. Sapiente dignissimos in provident fugit voluptatem commodi, ipsa blanditiis assumenda quasi amet excepturi nostrum voluptatum molestiae ratione, corrupti hic voluptatibus.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum accusamus cum voluptas voluptate esse asperiores cupiditate velit quaerat optio, praesentium ipsa, deserunt veniam facilis libero accusantium! Similique accusamus assumenda beatae amet harum delectus quisquam minima quidem id veniam a eaque iste labore distinctio quia cupiditate, ullam suscipit. Repellendus, porro, officiis!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero atque officia, hic iure placeat, dolores amet eaque quae, eveniet laboriosam voluptatibus fugit velit aut. Facilis expedita, id quasi asperiores molestiae, numquam provident consectetur maxime ad dolorem illo, voluptas dolore accusantium quam deleniti enim ratione doloremque cum omnis ea maiores, deserunt earum eveniet minima eaque. Soluta earum amet esse rem vitae eaque enim aut obcaecati laudantium provident eius delectus nulla doloremque omnis quisquam, ut eos modi, autem tenetur! Deserunt pariatur cum aspernatur aperiam, obcaecati libero, tenetur veritatis aut praesentium architecto optio perspiciatis quo ut. Atque, soluta doloribus recusandae quibusdam ipsam qui!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, unde.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus perspiciatis molestiae nemo soluta nesciunt alias porro impedit, perferendis molestias possimus mollitia asperiores laboriosam consectetur enim odit, animi facere earum consequatur in veniam neque quae esse. Beatae iure laboriosam optio? Pariatur.

FOOTER
if( $(document).height()
.page-footer < padding: 1rem; background: #333; color: #fff; text-align: center; >.page-footer.fixed-bottom
  

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, harum. Sapiente dignissimos in provident fugit voluptatem commodi, ipsa blanditiis assumenda quasi amet excepturi nostrum voluptatum molestiae ratione, corrupti hic voluptatibus.

FOOTER

Шапка и подвал сайта (Header и Footer)

Посмотрите видеоурок о том, как добавить шапку и подвал на сайт или прочитайте подробную инструкцию ниже.

Чтобы разместить блок сразу на всех страницах сайта (например, меню), нужно создать отдельную страницу, поместить на нее элементы, которые должны быть на всех страницах, перейти в Настройки сайта → Шапка и подвал и назначить созданную страницу как шапку или подвал.

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

Чтобы сделать хедер, создайте новую страницу и добавьте нужные элементы: меню или логотип. Перейдите Настройки сайта > Шапка и подвал и назначьте эту страницу как шапку (header).

Footer (футер, подвал) — блок в нижней части страницы. Содержит полезную, но не первостепенную информацию. Виден на всех страницах сайта. В футер можно вынести: копирайт, название студии, которая разрабатывала сайт, контакты. Иногда в футере дублируются пункты меню. Футер создается аналогично хедеру: создайте новую страницу, на ней оформите футер, перейдите Настройки сайта > Шапка и подвал и назначьте эту страницу как подвал (footer).

Чтобы хедер и футер стали видны, опубликуйте все страницы (а не только страницы, назначенные как хедер и футер).

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

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