Статьи

Как расширить обернутые элементы до полной ширины браузера с помощью CSS

Октябрь 29, 2018

Извиняюсь за длинный заголовок, но это распространенная проблема в 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;
}

Но мы не можем сделать это для нижнего колонтитула, так как он находится внутри article Наиболее очевидным решением являются элементы-обертки, т.е. мы перемещаем footerarticle 

 
	…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;
}

Это решение, которое мы все используем, хотя и оскорбляет семантических богов HTML. Внутренний div

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

 
body
{
	overflow-x: hidden;
}

.extendfull, .extendleft
{
	padding-left: 3000px;
	margin-left: -3000px;
}

.extendfull, .extendright
{
	padding-right: 3000px;
	margin-right: -3000px;
}

Когда класс «exteleft» применяется к элементу, он распространяется на левый край браузера. Точно так же «extends» расширяет его до правого края, а «extefull» делает и то, и другое. Чтобы предотвратить горизонтальную прокрутку, мы применяем overflow-x: hiddenbody

Посмотреть демонстрационную страницу …

Техника работает в IE8, IE9, Firefox, Chrome, Safari и Opera. Он не заменяет теги-обертки, но предлагает альтернативное решение для некоторых проблем с макетом.

Но я обязательно должен поддерживать IE6 и IE7!

В самом деле? Вы уверены? Эта техника не сломает ваши проекты, но IE6 отказывается показывать фон за пределами внешнего элемента. IE7 старается изо всех сил, но, хотя «exteleft» обычно работает, это не относится к «extendedright».

Лично я бы оставил устаревшие браузеры такими, какие они есть … но я не твой босс . К счастью, вы можете решить эту проблему с помощью небольшой хитрости CSS: 

 
/* IE6/7 fix */
.extendfull, .extendleft, .extendright
{
	position: relative;
	display: inline;
	float: left;
	width: 100%;
}

Если вам повезет, это не окажет вредного влияния на ваш макет в современных браузерах. Если это произойдет, вам нужно соответствующим образом настроить свои стили, использовать условную таблицу стилей или добавить несколько ужасных хаков IE6 / 7. Удачи!

32
Share: