EN
Оставить заявку

Header footer stretch

Header footer stretch

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

В большинстве случаев на сайтах встречаются так называемые хедер-футер стрейч

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

Ниже приведено два примера кода, слева — стандартный способ, справа — с вырыванием содержимого из основного блока.

HTML -код:

CODE-2

CSS-код:

code-text

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

Метод который я вам предлагаю, на мое мнение куда проще и эффективней.

Плюсы:

  • Понятная, гибкая структура кода
  • Избавляемся от лишних блоков
  • Центрируем весь документ глобально, вследствие не нужно задавать каждому блоку отдельно центровку

Минусы:

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

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

stretch-2

В таком случае нам достаточно 3 блока — один родительский блок и два дочерних. Вырываем левый блок с помощью того же свойства margin-left: -9999px; и возвращаем его обратно внутренним отступом padding-left: 9999px;

Практически такое же делаем и с правым блоком, только уже в другую сторону margin-right:-9999px; padding-right:9999px; Как итог получаем две разных заливки и чувствительно упрощаем код.

Что Важно запомнить:

  • Если будете использовать этот метод очень важно не забыть обвернуть весь Ваш документ в блок, который будет удалять горизонтальный скролл, в противном случае вы получите скролл на 9999px
  • Если Вы будете использовать на сайте слайдер на всю ширину экрана, лучше не вырывать его из блока, а сделать стандартным способом, не ограничивая блок по ширине.
  • Так же если могут возникнуть проблемы с абсолютным позиционированием элемента внутри вырванного блока, так как значение left и right он будет отсчитывать начиная с 9999px, чтобы этого не было Вам придется сделать обертку элементу с абсолютным позиционированием.
Header footer stretch 4.84/5 1268
Контакты
Украина
0 800 330 690
бесплатно по Украине с любого номера
Киев, ул. Вадима Гетьмана, 1Б
Харьков, ул. Отакара Яроша, 18
Нью-Йорк
Москва
 
ОБСУДИТЬ ПРОЕКТ
Крутые проекты начинаются с заполнения этой формы
Success
Заявка успешно отправлена
Спасибо, что обратились в Art Lemon.
Обращения обрабатываются с 10:00 до 18:00 по будням. Заявки, полученные в выходные, обрабатываются в первой половине следующего рабочего дня.
Переверните устройство