使用负边距的完整浏览器宽度栏

Question

我正在尝试按照本教程进行操作：

https://css-tricks.com/full-browser-width-bars/#article-header-id-0

我需要的是，我的<header>元素是一个800px的 max-width ，位于页面中间。然后在该标题栏中，我将有一个 #filtersBar div，它将遍历整个页面（边缘到边缘）。这是我的代码到目前为止所发布的：

这是一个小提琴：

https://jsfiddle.net/us2jsmLy/3/

html, body {
  overflow-x: hidden;
}

header {
  position: relative;
  width: 100%;
  margin: 0 auto;
  max-width: 1200px;
  z-index: 250;
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  background:red;
  justify-content: space-between;
}

#filtersBar {
  position: relative;
  background: green;
  width: 100%;
  max-width: 800px;
  margin: 0 -9999rem;
  padding: 0.25rem 9999rem;
  z-index: 1;
}

#filtersBarInner {
  position: relative;
  width: 100%;
  max-width: 800px;
  background-color: blue;
  z-index: 2;
}

<header>
  foo bar some contents
  <div id="filtersBar">
    <div id="filtersBarInner">
      dddd
    </div>
  </div>
</header>

我一定错过了一些愚蠢的事：/

Answer 1

据我了解，您可以使用:before伪表示完整的背景边缘，并将margin:0应用于正文

<强> Updated Fiddle

＆＃13;

＆＃13;

html,
body {
  overflow-x: hidden;
  margin: 0;
}

div#filtersBar:before {
  content: "";
  position: absolute;
  background: green;
  top: 0;
  bottom: 0;
  left: -1000px;
  right: -1000px;
  z-index: -1;
}

header {
  position: relative;
  width: 100%;
  margin: 0 auto;
  max-width: 800px;
  z-index: 250;
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  background: red;
  justify-content: space-between;
}

#filtersBar {
  position: relative;
  background: green;
  width: 100%;
  max-width: 800px;
  z-index: 1;
  padding: 15px 0;
}

#filtersBarInner {
  position: relative;
  width: 100%;
  max-width: 800px;
  /*margin: 0 auto;*/
  background-color: blue;
  z-index: 2;
}

＆＃13;

<header>
  foo bar some contents
  <div id="filtersBar">
    <div id="filtersBarInner">
      <p>
        ddddd
      </p>
      <p>
        ddddd
      </p>
      <p>
        ddddd
      </p>
      <p>
        ddddd
      </p>
    </div>
  </div>
</header>

＆＃13;

＆＃13;

＆＃13;