@senselessV7

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

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 должен быть на всю ширину экрана не врапа, но почему-то обрезается! Из-за чего такое происходит?!
  • Вопрос задан
  • 292 просмотра
Решения вопроса 1
Ankhena
@Ankhena Куратор тега CSS
Нежно люблю верстку
Для st
.st {min-width:800px;} /*или больше*/
и все у Вас будет хорошо.
Ответ написан
Пригласить эксперта
Ответы на вопрос 4
@ukoHka
Всего понемногу
.wrap {
  width: 800px;
  background: #ccc;
}

Для div ширина по умолчанию 100% и от содержимого не зависит. Следовательно, ширина .st не изменится от наличия .wrap
Точнее auto. Которое высчитывает значение по ширине родителя включая рамки и отступы.
Ответ написан
DENDIBAEV
@DENDIBAEV
Тыжпрограммист
background: #fff no-repeat center center fixed;
background-size: cover;
Ответ написан
@tommy_13
установите min-width для wrapper
Ответ написан
Комментировать
andykov
@andykov
Shit happens
Судя по вашим комментам, вам нужно это:
html { min-width: 100%; } // либо 800px
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы