2

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

.wrapper {
  background-color: burlywood;
  text-align: justify;
  margin: 0 auto;
  width: 200px;
  padding-right: 100px !important;
  position: relative;
}
.wrp {
  background-color: chocolate;
  height: 100%;
  min-height: 100vh;
  width: 100%;
  /* min-width: 100vw; - этот вариант не работает, также как и с calc*/
}
<div class="wrapper">
много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста
<div class="wrp">Этот блок нужно растянуть по ширине экрана, за пределы его родителя</div>
много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста
</div>

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

Html разметку трогать нельзя, также как нельзя изменять стиль для родительского блока, а именно его ширину, margin, padding и position: relative.

Возможно ли все-таки это в принципе?

1
  • не понятно в чём задача
    – user208916
    9 ноя 2017 в 18:48

1 ответ 1

5

Добавьте дочернему блоку ширину 100vw и отрицательный маржин по бокам (с учётом ширины и паддинга родителя).

100vw захватывает вертикальную полосу прокрутки. Чтобы из-за этого не появилась горизонтальная прокрутка, нужна поправка на ширину полосы прокрутки. Чаще всего это 16px:

* {
  box-sizing: border-box;
}
body {
  margin: 0;
  padding: 0;
}
.wrapper {
  background-color: burlywood;
  text-align: justify;
  margin: 0 auto;
  width: 200px;
  padding: 0 100px 0 0;
}
.wrp {
  background-color: chocolate;
  height: 100%;
  min-height: 100vh;
  margin: 0 calc(8px - 50vw) 0 calc(108px - 50vw);
  padding: 0;
  width: calc(100vw - 16px);
}
<div class="wrapper">
много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста
<div class="wrp">Этот блок нужно растянуть по ширине экрана, за пределы его родителя</div>
много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста
</div>

Или можно добавить overflow-x: hidden; для body:

* {
  box-sizing: border-box;
}
body {
  margin: 0;
  overflow-x: hidden;
  padding: 0;
}
.wrapper {
  background-color: burlywood;
  text-align: justify;
  margin: 0 auto;
  width: 200px;
  padding: 0 100px 0 0;
}
.wrp {
  background-color: chocolate;
  height: 100%;
  min-height: 100vh;
  margin: 0 -50vw 0 calc(100px - 50vw);
  padding: 0;
  width: 100vw;
}
<div class="wrapper">
много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста
<div class="wrp">Этот блок нужно растянуть по ширине экрана, за пределы его родителя</div>
много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста
</div>

А если всё выразить в процентах, то можно обойтись без calc и oferflow-x:

* {
  box-sizing: border-box;
}
body {
  margin: 0;
  padding: 0;
}
.wrapper {
  background-color: burlywood;
  text-align: justify;
  margin: 0 auto;
  width: 40%;
  padding-right: 20%;
}
.wrp {
  background-color: chocolate;
  height: 100%;
  min-height: 100vh;
  margin: 0 -250% 0 -150%;
  width: 500%;
}
<div class="wrapper">
много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста
<div class="wrp">Этот блок нужно растянуть по ширине экрана, за пределы его родителя</div>
много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста
</div>

6
  • 1
    Да, спасибо, увидел это замечание, поэтому дал второй вариант как дополнительный. 8px это примерно половина ширины полосы прокрутки. Можно посчитать точнее и можно настроить разные значения под разные браузеры, если нужно. 9 ноя 2017 в 19:32
  • Второй вариант работает неправильно так как растянутый блок выходит за пределы экрана и обрезает информацию. А так же у меня вопрос к вам: насколько это нормально делать подобную верстку вместо нормального родителя с 100% ширины по умолчанию?
    – Telion
    9 ноя 2017 в 19:40
  • @Telion Спасибо за замечание, исправил. 9 ноя 2017 в 19:46
  • 1
    @LADYX Увы, 100vw захватывает полосу прокрутки. Вот и вот обсуждения на SO. Мне нравится вариант с overflow-x: hidden; для body. Отредактировал с его помощью первый вариант решения. 9 ноя 2017 в 20:06
  • 1
    learn.javascript.ru/task/scrollbar-width Обычно она равна 16px, в редких и мобильных браузерах может колебаться от 14px до 18px, а кое-где даже равна 0px. Под конкретный браузер можно настроиться с помощью CSS-хаков. Или скриптов высчитывать полосу прокрутки и скриптом же корректировать стили. Но предлагаю взять 16px за золотую середину и добавить overflow-x: hidden на случай, если всё-таки больше. 9 ноя 2017 в 21:17

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.