什么是制作此布局的最佳方式？

Question

我想知道，使用HTML和CSS制作此布局的最佳方法是什么。

页眉和页脚覆盖窗口的100％宽度。容器的最大宽度为1200px。 Sidenav需要具有不同的背景颜色 - 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没有与页眉和页脚对齐＆＃34;容器＆＃34; ...

我创建了一个快速模型来演示我的问题：http://codepen.io/anon/pen/yOVZYY

Answer 1

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

.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）值。

以下是一个示例：http://codepen.io/CKH4/pen/yOVZGb，它应该符合您建议的所有要求。如果你想让side-nav浮动设置：

.main {
  overflow: auto;
}