Как сделать хедер и футер css
Перейти к содержимому

Как сделать хедер и футер css

  • автор:

header

Добро пожаловать на сайт

Новости

Содержимое раздела

Для есть определённые ограничения — элемент нельзя вкладывать внутрь другого , а также внутрь и . Внутри не должно быть элемента .

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

Элемент

Элемент задаёт подвал сайта или раздела веб-страницы, в нём может располагаться имя автора, дата документа, контактная и правовая информация.

Чтобы определить подвал для сайта, размещают внутри , подобно элементу , как показано в примере 3.

Пример 3. Подвал сайта

Учтите, что элемент нельзя вкладывать внутрь другого , а также внутрь элементов и . Внутри не должно быть элемента .

Кроме того, мы можем вставить внутрь статьи, чтобы показать дату её публикации (пример 4).

Пример 4. Подвал статьи

footer

О влиянии металлических инструментов на инопланетные организмы

Автор: Гордон Фримен

Опубликовано

В данном примере внутри используется элемент для заголовка статьи и имени автора, а внизу добавлен элемент для даты публикации.

CSS Расстояние между header и footer пустой галереи

Необходимо сделать так, чтобы хедер и футер были пришиты к верхнему и нижнему краям экрана cоответственно при пустой галереи (до запроса на бекенд)?

Отслеживать
задан 12 янв 2023 в 16:44
Yurii Yashchuk Yurii Yashchuk
Вот тут можно без особых усилий такое смастерить онлайн. createtemplate.hellohtml.ru
12 янв 2023 в 16:53

1 ответ 1

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

Если у вас есть какой-либо контейнер, то его можно растянуть через flex-grow: 1;
Если же нет, то футеру добавить margin-top: auto;

* html < height: 100%; >body < height: 100%; display: flex; flex-direction:column; >main < flex-grow: 1; display:none; background:red; >footer
  
header
main
footer

Отслеживать
ответ дан 12 янв 2023 в 16:58
462 3 3 серебряных знака 8 8 бронзовых знаков

  • css
  • header
  • gallery
    Важное на Мете
Похожие

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2024 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2024.2.16.5008

Как зафиксировать, чтобы header был вверху, а footer внизу?

AlexanderTsymbal

и у .article надо padding-top и padding-bottom задать для компенсации высоты хэдера и футера, чтобы содержание не «пряталось» за ними.

А вообще, надо понимать контекст задачи. Видеть макет. Потому что фиксированный футер — это редкость. Только если что-то типа мессенджера верстается, где в футере поле для ввода текста всегда должно быть видно.

Ответ написан более года назад

Ernesto

Alexsey @Ernesto Автор вопроса

Да так и есть..типа мессенджера.
Footer отправить сообщение. Header список чата и вернутся на другой экран.

AlexanderTsymbal

Александр Цымбал @AlexanderTsymbal

тогда еще как вариант — у рутового элемента (body, html, .wrapper — в зависимости от задачи) отключить вертикальный скролл совсем. добавить

overflow: hidden; height:100vh; //или 100% - в зависимости от вёрстки

а у блока .article наоборот добавить скролл

overflow-y: scroll;//или auto или overlay - что понравится overflow-x: hidden;

Тогда скролл будет тянуться только по высоте .article, что визуально более правильно. Но сути не меняет.

Ankhena

Ankhena @Ankhena Куратор тега CSS

Александр Цымбал, Alexsey, а ведь 2022 год на дворе и давно придумали флексы и даже гриды, чтобы не страдать фиксами и расчетами паддингов. Хоть плачь
https://codepen.io/AnnaSummer/pen/gOvbEdB
Вам только чуть-чуть скорректировать и прокрутку добавить.

AlexanderTsymbal

Александр Цымбал @AlexanderTsymbal
Ankhena, а вы смотрели последний мой codepen? куратор тега CSS

AlexanderTsymbal

Александр Цымбал @AlexanderTsymbal

Ankhena, и вообще, чем плох position: fixed? если задача зафиксировать элемент поверх прокручиваемого? просто нельзя? что за предубеждения?

Ankhena

Ankhena @Ankhena Куратор тега CSS

Александр Цымбал, полно статей про позиционирование, почитайте что делают fixed, absolute, про поток документа, слои, как браузер всё это рисует и перерисовывает при изменениях.
Ничего плохого в них нет, если использовать по назначению и когда нет других вариантов.
В вашем решении, нужно к этому ещё и js прикрутить, чтобы узнать высоту и передать её в отступы.

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

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

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

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

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

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

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

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

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