Блок внутри контейнера на всю ширину

Question

Как сделать, чтобы блок был на всю ширину экрана, при этом данный блок находится внутри родительского контейнера у которого есть свои отступы, т.е. родительский блок не на всю ширину экрана.
Пытался сделать так, но что-то не получается сделать правильное вычисление при 'resize`.

https://jsfiddle.net/pke8L4sn/

var w = $(window).width();
var $fullWidth = $('.custom_full_width');
function set_full_width($fullWidth){
  $fullWidth.each(function(i,el){
    var $row = $(el);
    var offsetLeft = $row.offset().left;
    $row.css({
      transform: 'translateX('+ -offsetLeft+'px)',
      width: w
    })
  });
}
set_full_width($fullWidth);
$(window).on('resize', function(){
  $fullWidth.length && set_full_width($fullWidth);
});

.parent{
  padding: 30px;
  width: 80%;
  margin:0 auto;
}
.container{
  width: 100%;
  margin:0 auto;
  height: 400px;
  border:1px solid #000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="parent">
  <div class="container custom_full_width">content</div>
</div>

P.S.
Как сделать чтобы вложенный блок был на всю ширину экрана? https://jsfiddle.net/qmvtk40u/

Answer 1

Надеюсь, что я правильно понял вопрос.

var w = $(window);
var $fullWidth = $('.custom_full_width');

function set_full_width($fullWidth) {
  $fullWidth.each(function() {
    let offsetLeft = $(this).offset().left;
    if (offsetLeft) {
      $(this).css({
        transform: `translateX(${-offsetLeft}px)`
      });
    }
    $(this).width(w.width());
  });
}

set_full_width($fullWidth);

$(window).on('resize', function() {
  $fullWidth.length && set_full_width($fullWidth);
});

body { margin: 0; }

.parent {
  margin: 27px;
  padding: 30px;
  box-shadow: inset 0 0 15px red;
}

.container1 {
  position: relative;
  height: 100px;
  box-shadow: inset 0 0 15px green;
}

.container2 {
  position: relative;
  height: 400px;
  box-shadow: inset 0 0 15px blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="parent">
  <div class="container1 custom_full_width">Как сделать, чтобы блок был на всю ширину экрана, при этом данный блок находится внутри родительского контейнера у которого есть свои отступы, т.е. родительский блок не на всю ширину экрана. Пытался сделать так, но что-то не получается сделать правильное вычисление при 'resize`.</div>
  <div class="container2 custom_full_width">Как сделать, чтобы блок был на всю ширину экрана, при этом данный блок находится внутри родительского контейнера у которого есть свои отступы, т.е. родительский блок не на всю ширину экрана. Пытался сделать так, но что-то не получается сделать правильное  вычисление при 'resize`.</div>
</div>

Answer 2

Если правильно понял

* {
  box-sizing: border-box;
}

.parent {
  padding: 30px;
  width: 80%;
  margin: 0 auto;
  border: 1px solid #000;
}

.container {
  width: 100%;
  height: 100px;
  border: 1px solid #f00;
}

.custom_full_width {
  width: 100vw;
  background-color: #f7f7f7;
  transform: translateX(-50%);
  position: relative;
  left: 50%;
}

<div class="parent">
  <div class="container custom_full_width">content</div>
</div>

БЛОГ НА HUSL

Блок внутри контейнера на всю ширину

Ответы (2 шт):