使div的背景延伸到页面的两侧

Question

我的网站的基本结构由.page-container类提供，该类归因于主要容器元素。该类设置width，max-width和margin: auto;属性，以使所有内容整齐，居中并对齐。

在.page-container元素内，进行了进一步的细分，如下面的代码和图像所示。 Fiddle也可用。

代码段

body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

.bar {
  height: 55px;
  background: #3b3e42;
  color: white;
  width: 100%;
  position: absolute;
  line-height: 55px;
}

.page-container {
  width: 95%;
  max-width: 800px;
  margin: auto;
  position: relative;
}

header.page-container {
  border: 1px dashed white;
  box-sizing: border-box;
}

.main-page {
  padding-top: 60px;
}

.navigator {
  width: 20%;
  position: absolute;
  border: 1px dashed red;
}

.navigator ul {
  list-style: none;
  padding: 0 1em;
}

.content {
  padding-left: 2%;
  width: 77%;
  right: 0;
  position: absolute;
  border: 1px dashed blue;
}

<nav class="bar">
  <header class="page-container">Website Bar</header>
</nav>
<main class="main-page page-container">
  <nav class="navigator">
    <ul>
      <li>Link</li>
      <li>Link</li>
      <li>Link</li>
      <li>Link</li>
    </ul>
  </nav>
  <article class="content">
    <h1>Title</h1>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc euismod vehicula nunc, quis vulputate est laoreet nec. Etiam feugiat a arcu efficitur maximus. Praesent tempus, leo a luctus dignissim, diam mauris pellentesque libero, ultrices iaculis sapien
      enim et lorem. Maecenas convallis quam elit, vitae euismod mi egestas nec. Praesent ut dapibus augue. Ut fermentum at eros non lobortis. Quisque volutpat nisl non odio vulputate tempor.
    </p>
  </article>
</main>

我想在文本部分（小提琴中带有<article>类的.content）中添加背景，该背景延伸到屏幕的上部，下部和右侧。

我想尽可能地维持当前架构，而又不添加无意义的元素，从而获得类似于下图的效果。可能吗？我应该重新考虑我的架构吗？首先我的设计模式好吗？

Answer 1

是的，您需要重组您的元素。看看FlexBox：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

您可以根据需要添加一个div大小，并在其CSS中为其选择背景颜色或图像。