Яндекс.Метрика

Дизайн-журнал №1. Актуальная информация для дизайнеров, веб дизайнеров, программистов и разработчиков сайтов.

Как растянуть элементы, находящиеся в блоках, на полную ширину окна браузера

3 июня 2015 | Опубликовано в css | 1 Комментарий »

Как растянуть элементы, находящиеся в блоках, на полную ширину окна браузера, используя при этом 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. Оно не может полностью заменить способ с дополнительными элементами, но в некоторых случаях это альтернативное решение может быть полезно. Но не стоит забывать, что это решение уменьшает быстродействие сайта.

Автор урока Craig Buckler

Перевод — Дежурка

Смотрите также:


�


Комментарии

Похожие статьи

Случайные статьи



Друзья

    • Самые комментируемые