Bars of background color without container divs

Question

It's trivial to obtain a centered, max-width website with a single background color by styling up the body element like so:

body {
  max-width: 500px;
  margin: auto;
  background-color: black;
}

header {
  height: 100px; /* Might not be static */
  background-color: red;
}

#main {
  height: 300px; /* Might not be static */
  background-color: yellow;
}

footer {
  height: 200px; /* Might not be static */
  background-color: blue;
}

<header>
</header>
<section id="main">
</section>
<footer>
</footer>

However, if you want the background color for each section of the page to extend infinitely on either side, things can quickly get non-semantic:

header {
  height: 100px; /* Might not be static */
  background-color: red;
}

#main {
  height: 300px; /* Might not be static */
  background-color: yellow;
}

footer {
  height: 200px; /* Might not be static */
  background-color: blue;
}

.container {
  box-sizing: border-box;
  margin: auto;
  max-width: 500px;
  height: 100%;
  border: 2px black dotted;
}

<header>
  <div class="container">
  </div>
</header>
<section id="main">
  <div class="container">
  </div>
</section>
<footer>
  <div class="container">
  </div>
</footer>

Is there a good way to achieve the effect of the second example without adding a container div to every top-level block? Even a CSS trick that generates such containers dynamically would be preferable.

Answer 1

header {
  height: 100px;
  /* Might not be static */
  background-color: red;
  position: relative;
}

#main {
  height: 300px;
  /* Might not be static */
  background-color: yellow;
  position: relative;
}

footer {
  height: 200px;
  /* Might not be static */
  background-color: blue;
  position: relative;
}

footer,
header,
#main {
  box-sizing: border-box;
  margin: auto;
  max-width: 500px;
  border: 2px black dotted;
}

header:before,
#main:before,
footer:before {
  content: '';
  width: 100vw;
  transform: translate(-50%);
  height: 100%;
  left: 50%;
  position: absolute;
  z-index: -1;
}

header:before {
  background-color: red;
}

#main:before {
  background-color: yellow;
}

footer:before {
  background-color: blue;
}

<header>
  My header so nice;
</header>
<section id="main">
  my content so nice
</section>
<footer>
  my footer very low
</footer>