Развернуть размер дочернего элемента за пределами родительского контейнера

Question

У меня есть веб-страница с отзывчивым дизайном Bootstrap. Я добавил добавление слева и справа к обертке, так что на мобильном будет промежуток между краем. Но мое расширенное меню имеет некоторый цвет фона, который должен иметь полную ширину браузера. Как я могу это сделать? Я могу сделать это с отрицательным запасом, но он не будет расширять цвет фона. Есть ли способ сделать это без изменения макета?

#wrapper { 
 
    box-sizing: border-box; 
 
    /* responsive, so it's real 'width: 100%' */ 
 
    width: 150px; 
 
    height: 150px; 
 
    padding: 0 10px; 
 
    background-color: #ddd; 
 
    border: 1px solid green; 
 
} 
 
#wrapper .div { 
 
    background-color: #afa; 
 
    width: 100%; 
 
    height: 90px; 
 
    border: 1px solid red; 
 
    box-sizing: border-box; 
 
    margin-bottom: 10px; 
 
} 
 
#wrapper .div2 { 
 
    width: 100%; 
 
    height: 50px; 
 
    border: 1px solid red; 
 
    box-sizing: border-box; 
 
    background-color: #aaf; 
 
}

<div id="wrapper"> 
 
    <div class="div">Must expand till green borders</div> 
 
    <div class="div2">Must stay as is</div> 
 
</div>

Answer 1

Вы можете использовать отрицательные поля: http://jsfiddle.net/3f1t35xv/.

Изменить #wrapper .div на следующее:

#wrapper .div { 
    background-color: #afa; 
    /* width: 100%; */ 
    height: 90px; 
    border: 1px solid red; 
    box-sizing: border-box; 
    margin: 0 -10px 10px; 
} 

Вот другой (гораздо менее элегантную) способ сделать это: http://jsfiddle.net/au73dL07/.

#wrapper .div { 
    background-color: #afa; 
    height: 90px; 
    border: 1px solid red; 
    box-sizing: border-box; 
    position: relative; 
    left: -10px; 
    width: calc(100% + 2 * 10px); 
    margin-bottom: 10px; 
}