将子元素宽度扩展到父容器之外

Question

I have webpage with Bootstrap responsive design. I have added padding from left and right to wrapper, so on mobile there will be some spaces between edge. But my expanding menu has some background color, that must take full browser width. How can i make it? I can make that with negative margin, but it will not expand background color. Is there any way to do that without changing layout?

 #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

You can use negative margins: http://jsfiddle.net/3f1t35xv/ .

Change #wrapper .div to the following:

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

Here's another (a lot less elegant) way to do it: 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;
}