Как растянуть дочерний блок за пределы родительского?

314

11 ноября 2017, 12:56

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

.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.

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

Answer 1

Добавьте дочернему блоку ширину 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>