Как растянуть элементы в блоках, на полную ширину окна браузера
Как растянуть элементы, находящиеся в блоках, на полную ширину окна браузера, используя при этом CSS? Эта проблема часто встречается в разметке CSS. Нередко нужно, чтобы элемент растягивался за пределы центрального блока страницы и занимал всю ширину окна браузера. На картинке слева вы видите распространенный дизайн страницы.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>SiteName</title> </head> <body> <article> <header></header> <nav></nav> …content… <footer></footer> </article> </body> </html>
Внешний элемент страницы отцентрирован с помощью, например, следующего кода CSS:
article { width: 70%; margin: 0 auto; }Так как же применить повторяющийся горизонтальный фон, заполняющий все окно браузера? Это легко сделать для элементов, находящихся сверху на странице, так как можно задать фоновое изображение тегу body, например:
body { background: url(header.png) 0 0 repeat-x; }Но этот способ не подойдет для блока footer, так как он находится в блоке article и его расположение определяется размером его содержимого. Наиболее очевидное решение — использование дополнительных элементов, т. е., мы передвинем блок footer из блока article и добавим внутренний блок:
…content… </article> <footer> <div class="content"> <p>Footer content.</p> </div> </footer>
После этого нужно добавить соответствующие стили в код CSS:
footer { width: 100%; background: url(footer.png) 0 0 repeat-x; } div.content { width: 70%; margin: 0 auto; }Это наиболее часто используемое решение, хотя оно и не изящное. Внутренний блок нужен только для задания стилей CSS, а не для структуры.
К счастью, есть решение, работающее во всех современных браузерах и не требующее дополнительных блоков. Нужно добавить свойство внутреннего отступа с большим значением, затем сдвинуть элемент назад в его начальное положение с помощью отрицательного внешнего отступа. Этот способ часто используется для создания столбцов равной высоты, а в этом случае он применяется к ширине:
body { overflow-x: hidden; } .extendfull, .extendleft { padding-left: 3000px; margin-left: -3000px; } .extendfull, .extendright { padding-right: 3000px; margin-right: -3000px; }Когда класс .extendleft применяется к элементу, элемент растягивается до левого края окна браузера. Подобным образом класс .extendright растягивает элемент до правого края окна браузера, а класс .extendfull растягивает в обе стороны. Чтобы не появилась горизонтальная прокрутка, нужно задать тегу body свойство overflow-x: hidden, скрывающее содержимое, выходящее за пределы окна браузера.
Посмотрите демонстрацию работы
Это решение работает в браузерах Internet Explorer от версии 8, Firefox, Chrome, Safari и Opera. Оно не может полностью заменить способ с дополнительными элементами, но в некоторых случаях это альтернативное решение может быть полезно. Но не стоит забывать, что это решение уменьшает быстродействие сайта.