html - 扩展子元素宽度超出父容器

Question

我有一个采用 Bootstrap 响应式设计的网页。我在 wrapper 上添加了左右填充，因此在移动设备上，边缘之间会有一些空间。但是我的扩展菜单有一些背景颜色，必须占据整个浏览器宽度。我怎样才能做到？我可以用负边距制作它，但它不会扩展背景颜色。有没有办法在不改变布局的情况下做到这一点？

#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;
}