Обрезается фон

[massef]

Добрый день.

 

Имеется следующая структура:

<header class="header">    <div class="header-inner">.....</div></header>

.header {	background-color: #727171;}.header-inner {	width: 1470px;	margin: 0 auto;}

Пример в песочнице http://jsfiddle.net/xDyfP/, в фулскрине почему-то воспроизвести не удалось, смотрите в окне результата, прокрутите горизонтальный скрол.

 

Вопрос.

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

Такая ситуация возникла у меня в макете, скрин ниже.

 

 

Как видите серый фон обрезается.

 

Как это вылечить?

 

upd: например вот на этом сайте h ttp://medvediha.com/ такого эффекта не наблюдается, хотя структура и стили точно такие же, разве что ширина у меня больше.

Гляньте например на блок с красным фоном, есть див с двумя классами .block и .red у которого ширина не указанна и внутри него есть див к лассом .cont у которого ширина равна 940px;

 

upd: подниму вопрос, неужели никто не сталкивался.

Edited January 22, 2014 by massef

[Светлана Г.]

Ширина элемента определяется областью просмотра. Область просмотра меньше ширина элемента - появляется прокрутка. О прокрутке знает только элемент html. Вот как-то так...

 

Вывод: размер нужно задавать родителю.

Edited January 22, 2014 by Светлана Г.