Як розтягнути елементи, що знаходяться в блоках, на повну ширину вікна браузера, використовуючи при цьому CSS? Ця проблема часто зустрічається в розмітці CSS. Нерідко потрібно, щоб елемент розтягувався за межі центрального блоку сторінки і займав всю ширину вікна браузера. На зображенні зліва ви бачите поширений дизайн сторінки.
Зовнішній елемент сторінки відцентровано за допомогою, наприклад, наступного коду CSS:
Так як же застосувати повторюється горизонтальний фон, що заповнює все вікно браузера? Це легко зробити для елементів, що знаходяться зверху на сторінці, так як можна задати фонове зображення тегу body, наприклад:
Але цей спосіб не підійде для блоку footer, так як він знаходиться в блоці article і його розташування визначається розміром його вмісту. Найбільш очевидне рішення - використання додаткових елементів, т. Е. Ми пересунемо блок footer з блоку article і додамо внутрішній блок:
Після цього потрібно додати відповідні стилі в код CSS:
Це найбільш часто використовується рішення, хоча воно і не витончене. Внутрішній блок потрібен тільки для завдання стилів CSS, а не для структури.
На щастя, є рішення, яке працює у всіх сучасних браузерах і не потребує додаткових блоків. Потрібно додати властивість внутрішнього відступу з великим значенням, потім зрушити елемент назад в його початкове положення за допомогою негативного зовнішнього відступу. Цей спосіб часто використовується для створення стовпців рівної висоти, а в цьому випадку він застосовується до ширини:
Коли клас .extendleft застосовується до елементу, елемент розтягується до лівого краю вікна браузера. Подібним чином клас .extendright розтягує елемент до правого краю вікна браузера, а клас .extendfull розтягує в обидві сторони. Щоб не з'явилася горизонтальна прокрутка, потрібно задати тегу body властивість overflow-x: hidden, яке приховує вміст, що виходить за межі вікна браузера.
Це рішення працює в браузерах Internet Explorer від версії 8, Firefox, Chrome, Safari і Opera. Воно не може повністю замінити спосіб з додатковими елементами, але в деяких випадках це альтернативне рішення може бути корисно. Але не варто забувати, що це рішення зменшує швидкодію сайту.
Переклад - Вартівня