Как развернуть вложенный блок на вессь экран по ширине?

188

22 февраля 2018, 12:10

Как сделать, чтобы зеленый блок развернулся на весь экран по ширине, при условии, что его нельзя менять его вложенность относительно того блока (желтого) где он находится?

<div style="width: 100px; height: 300px; margin: auto; background-color: yellow;">
<div style="height: 120px; background-color: green;"></div>
</div>

Answer 1

Если у вас есть возможность вынести див из потока, то можно сделать через абсолютное позиционирование:

* { 
  padding: 0; 
  margin: 0 
}

<div style=" 
width: 100px;  
height: 300px;  
margin: auto;  
background-color: yellow;"> 
  <div style=" 
  height: 120px;  
  background-color: green;   
  left: 0; 
  right:0; 
  position: absolute;"></div> 
</div>

Answer 2

Вариант с jQuery, при этом блок не вылетает из потока:

$(window).load(function() { 
  beyondParents($('.my')) 
}); 
$(window).resize(function() { 
  beyondParents($('.my')) 
}); 
 
function beyondParents(div) { 
  let outerWidth = $(window).width(); 
  let itemPosition = div.offset().left; 
  div.css({ 
    "margin-left": "-" + itemPosition + "px", 
    "width": outerWidth + "px" 
  }); 
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div style="width: 100px; height: 300px; margin: auto; background-color: yellow;"> 
  <div class="my" style="height: 120px; background-color: green;"></div> 
</div>