Как не показывать footer на странице css
Перейти к содержимому

Как не показывать footer на странице css

  • автор:

Как отключить футер на отдельной странице?

Author24 — интернет-сервис помощи студентам

Задать фон на отдельной странице сайта
создал на сайте отдельную страницу на нее вставил погоду но на ней нужно задать прозрачный фон как.

Как вывести модуль на отдельной странице?
Подскажите, пожалуйста, как сделать, чтобы модуль для CMS Joomla показывался на отдельной странице.

Как вывести статьи по категории на отдельной странице ?
вопрос состоит в том что нужно вывести статьи с определенной категорией на отдельной странице .

Как вывести посты на отдельной странице WordPress?
Пытаюсь прикрутить макет к WordPress. Я знаю как вывести посты на главную страницу, но на главной.

Как скрыть хедер и футер при печати страницы, сохранив отступ сверху на всех страницах?

Здравствуйте!
Интересует следующий вопрос — необходимо распечатать (сохранить как PDF) сверстанную страницу документа, при этом необходимо удалить выставляемые по умолчанию хедеры и футеры, но оставить отступ от верха каждой страницы.
Решение, найденное на просторах интернета, убирает хедеры и футеры, при этом убирает все отступы сверху страницы. Для первой страницы его выставить обратно удается, а остальные страницы становятся вплотную к верху.

@media print < @page < margin: 0; >body < margin-top: 1.6cm !important; >>

Можно ли каким-то образом убрать хедеры и футеры при печати, но сохранить отступы сверху страницы?
Заранее спасибо.

  • Вопрос задан более трёх лет назад
  • 483 просмотра

6 комментариев

Простой 6 комментариев

Как убрать Header и Footer сайта в теме WordPress?

Здравствуйте!
Есть проблема, создал страницу с помощью Visual Composer. Но на этой странице есть меню которое относится к теме WordPress, как его убрать? Хочу чтобы отображалось только созданное мной на Composer.
Скрин https://yadi.sk/i/67O-BnG4kNt5a
Подскажите пожалуйста

  • Вопрос задан более трёх лет назад
  • 9572 просмотра

Комментировать
Решения вопроса 1

master2016

Виктор @master2016
Всё нормально.

Если вообще по-простому.

1. в исходника страницы ищем что-то наподобии
2. убеждаемся, что это именно тот блок, который мы хотим убрать
3. прописываем ему или в стилях, или инлайн, если так приемлемо, стиль «display: none;»

Как прижать футер к низу страницы с помощью CSS

Набросаем простенькую страничку, на которой будем экспериментировать:

    Document  

HEADER - HEADER

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium molestias nulla neque omnis eaque ad perspiciatis cum mollitia excepturi sit. Amet, totam velit fugiat sunt voluptatum incidunt reprehenderit earum animi.

Sit excepturi natus velit laborum adipisci deserunt quasi veniam, pariatur non aspernatur fuga beatae dolorum cupiditate commodi maxime, id eligendi laboriosam molestiae iusto dignissimos ea et error assumenda architecto! Eos.

Perferendis animi totam, vel at reprehenderit veniam assumenda consequuntur perspiciatis similique. Eum repellat minus sed dolorem molestias, aperiam debitis hic! Quis obcaecati delectus iusto amet atque veritatis incidunt aspernatur temporibus.

Pariatur id ut obcaecati expedita, impedit ipsa error repudiandae fuga harum, saepe ratione perspiciatis recusandae! Hic numquam, beatae fuga laborum id illum voluptates voluptatibus ex deleniti mollitia nesciunt temporibus consequatur.

FOOTER - FOOTER

И зададим для нее такие же простенькие стили:

/* Декоративные стили */ * < margin: 0; padding: 0; box-sizing: border-box; >.page < width: 900px; margin: 0 auto; border: 2px dotted black; >header < padding: 10px; background: black; color: white; text-align: center; >.content-row < display: flex; >main < background: #eee; padding: 10px; >aside < background: #ddd; padding: 10px; >footer

Пока что это простое украшательство, мы добавили обертке штриховую рамку и раскрасили основные блоки — header, main , aside и footer, чтобы проще их различать. Текущий результат не очень впечатляет, правда?)

Футер висит где-то высоко над землей, а мы очень хотим его к этой земле приклеить.

Постановка задачи

Если в главном блоке мало контента, футер «прилипать» к низу странички. Если контента много, футер должен следовать за ним в нормальном потоке, скрываясь за нижней границей браузера. Другими словами, футер не должен маячить в нижней части страницы как приклеенный, если контент пытается выдавить его вниз.
Рассмотрим несколько вариантов решения проблемы.

Position: absolute

Предупреждение: данный способ годится только для футеров фиксированной высоты (для блока footer определено свойство height )!

footer

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

.page < position: relative; >footer

Что произошло? Да в общем ничего, за исключением того, что ширина футера уменьшилась до ширины его содержимого, а сам он наполз на контент главного блока. Чтобы исправить это пропишем футеру 100% ширину, а блоку .content нижний паддинг (отступ).

footer < width: 100%; >.content

При этом 100% будут браться от ширины блока .page , так как наш футер спозиционирован относительно него.

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

.page

Ничего же не изменилось! — возмутитесь вы, и будете правы. Да, мы строго-настрого приказали блоку page растянуться минимум на 100% от высоты доступной ему области. Однако, мы забыли, что этот блок находится внутри тела нашего документа — тега body , а тот, в свою очередь, внутри html , которым никто не потрудился сообщить о том, что следует занять всю доступную высоту. Понаблюдать за этой связью мы можем, назначив body любую высоту, например:

body

Прогресс налицо — футер уполз вниз. Теперь просто задаем body и html 100%-ную высоту и радуемся прилипшему футеру.

html, body

Того же эффекта можно было добиться, просто установив блоку .page минимальную высоту в 100vh .

.page

Табличная верстка

Не пугайтесь, никто не заставляет вас верстать таблицами, эта технология постепенно отходит в прошлое. Однако, сложно отрицать тот факт, что таблицы в некоторых аспектах — вещь крайне удобная. Например, в позиционировании футера. Мы можем заставить наши блоки вести себя как строки таблицы с помощью CSS-свойства display:table-row . Это весьма удобный метод, который, к тому же, не требует категорично определять высоту футера.
Блок .page станет таблицей, а блоки header , .content и footer ее рядами.

.page < display:table; >header, .content, footer

На первый взгляд ничего не изменилось. Однако теперь давайте зададим таблице и ее родительским блокам 100%-ную высоту.

html, body, .page

Что такое произошло? Наша таблица растянулась на всю высоту экрана, но все высота блоков изменилась. Это волшебное свойство таблиц — автоматически балансировать высоту своих рядов в зависимости от содержимого. С этим очень легко разобраться. Зададим футеру и хедеру высоту в 1 пиксель. Не бойтесь, они не превратятся в узкие полоски, их реальная высота будет высчитываться в зависимости от контента. Этот способ лишь позволить блоку .content растянуться во всю высоту страницы.

header, footer

В принципе, никто не мешает и здесь задать конкретную высоту для футера или хедера.

See the Pen by furrycat (@furrycat) on CodePen.

Флексбоксы

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

Это флексбоксы.
С их помощью решение проблемы «липкого футера» осуществляется очень просто и очень изящно:

html, body < height:100%; >.page < display: flex; min-height: 100%; flex-direction: column; >.content

Вот и вся хитрость «липкого» футера.

Верстайте с удовольствием!

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

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