Html 什么'；做这个布局的最好方法是什么？

我想知道，什么是最好的方式，使这个布局使用HTML和CSS只

页眉和页脚覆盖窗口的100%宽度。容器的最大宽度为1200px。Sidenav需要有不同的背景颜色-Sidenav内容位于容器内部，但背景应延伸到窗口的左侧

• 侧导航宽度应为容器的30%
• 主宽度应为容器的70%

以下是我到目前为止得到的信息：

<header>
..
</header>
<div class="container">
  <div class="row">
    <div class="ccol-lg-3 sidenav">
      <!-- Side nav -->
    </div>
    <div class="col-xs-12" >
      <!-- Main -->
    </div>
  </div>   
</div>
<footer>
...
</footer>

..
...

我正在使用flexbox网格

我也尝试移动到容器外部，但问题是在调整其大小时sidenav与页眉和页脚“容器”不对齐

---

我创建了一个快速模型来演示我的问题：

如果你知道侧导航的宽度，你可以：

.container {
  position: relative;
  max-width: 1200px;
  /* side margin on the container so its centered */
  margin: 0 auto;
  /* side nav width so that content and nav don't mix */
  padding-left: 30%;
  /* keeps the padding from making the container larger than the set width */
  box-sizing border-box;
}
.side-nav {
  /* side nav width */
  width: 30%;
  /* position absolute fixes the side nav to the side */
  position: absolute;
  /* set the position, its relative to the container because of the containers position relative */
  top: 0;
  left: 30%;
}
.side-nav:before {
  content: '';
  display: block;
  width: 100vw;
  height: 100%;
  background: inherit;
  position: absolute;
  top: 0;
  right: 100%;
}

如果将长度值替换为自己的值，则这应该满足您的需要。还可以使用百分比（%）和视口相对值（vw、vh、vmin、vmax）

下面是一个示例：，它应该满足您建议的所有要求。如果要设置侧导航浮动：

.main {
  overflow: auto;
}

---

你试过什么？所以，这并不是一个“为我做”的网站。你现在有什么HTML/CSS，它以什么方式不起作用？如果你在寻找“最好的”方式，-@dacrossby请查看。代码审查要求代码已经实现，并按预期工作。感谢您的反馈，我更新了我的问题并提供了更多信息information@DACrosby如果你能取消你的否决票，我将不胜感激。如果需要，我们乐意提供更多信息