Как задать фон на всю ширину для фиксированного макета?

Question

[Faber Estello]

HTML:

<main>
  <div class="st">
    <div class="wrap">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat et in culpa, esse animi sunt deleniti quibusdam quae debitis quidem ut voluptate autem, accusantium impedit perferendis aliquid expedita dolores blanditiis mollitia sapiente. Magni, cum in atque nulla inventore voluptatibus blanditiis nihil aperiam placeat velit, eaque sit sapiente, labore vitae nisi. Vero laborum fugit saepe ullam illo maxime aliquid consequatur, officiis amet nostrum quia quae ratione ad praesentium soluta, sed eligendi, cupiditate quis explicabo distinctio maiores fugiat ipsum ab voluptate. Consectetur dolor repudiandae enim asperiores non, rerum, unde sapiente accusamus? Accusamus saepe praesentium ipsa, amet accusantium fugit, ut sit quisquam reprehenderit.
      </p>
    </div>
  </div>
</main>

CSS:

.wrap {
  width: 800px;
}

.st {
  background: #ccc;
}

JSBIN

Не такой

<meta name="viewport" content="width=device-width">

Не такой <meta name="viewport" content="width=800">
мета теги не помогают!

При сужении экрана фон и .st должен быть на всю ширину экрана не врапа, но почему-то обрезается! Из-за чего такое происходит?!

Answer 1

[Ankhena]

Для st
.st {min-width:800px;} /*или больше*/
и все у Вас будет хорошо.

Comments

[Faber Estello]

спасибо, помогло!

Answer 2

[ukoHka]

.wrap {
  width: 800px;
  background: #ccc;
}

Для div ширина по умолчанию 100% и от содержимого не зависит. Следовательно, ширина .st не изменится от наличия .wrap
Точнее auto. Которое высчитывает значение по ширине родителя включая рамки и отступы.

Comments

[Faber Estello]

Ни о чем ответ! Мне нужно чтобы фон был на всю ширину экрана! "Точнее auto. Которое высчитывает значение по ширине родителя включая рамки и отступы." я использую box-sizing при чем ту это?

[ukoHka]

Sen Selesss: Вы даже не разбираетесь в том, что говорите. По фразе "почему-то обрезается" можно предположить, что вы хотите чтобы фон был такой же ширины, что и .wrap. Но теперь вы пишете, что должен быть на всю ширину экрана. Если экран сужается, то конечно будет сужаться и фон. Что и происходит изначально.

[Faber Estello]

ukoHka: Моя фраза из вопроса "При сужении экрана фон и .st должен быть на всю ширину, " При чем тут врап? Вы смотрели пример, поняли в чем вопрос и проблема прежде чем доказывать мне что Вы правы?!

[ukoHka]

Sen Selesss: Фон у вас итак стоит на всю ширину и ничего не обрезается. Если вы имеет в виду, что при прокрутке вправо фон становится белый, так это именно потому что .wrap шире экрана и ему фон не задан.

[Faber Estello]

ukoHka: да неужели? Наверное об этом я и спрашиваю? Почему так происходит, если у .st по-умолчанию ширина 100%. Почему .st не принимает хотя бы ширину врапа при уменьшении, а становится меньше хотя оборачивает врап!

[ukoHka]

Sen Selesss: Именно потому что ширина 100%. Что, повторюсь, считается от ширины экрана, который вы сами и сужаете, а не содержимого, включая .wrap.

Answer 3

[Арман Дендибаев]

background: #fff no-repeat center center fixed;
background-size: cover;

Comments

[Faber Estello]

не помогло!

Answer 4

[tommy_13]

установите min-width для wrapper

Answer 5

[Андрей Б.]

Судя по вашим комментам, вам нужно это:
html { min-width: 100%; } // либо 800px