侧边栏布局

侧边栏布局，它包含一个边栏（固定的），一个主栏（可滚动的）。

<div class="container">
  <!-- Sidebar -->
  <aside class="container__sidebar">...</aside>

  <!-- Main -->
  <main class="container__main">...</main>
</div>

基本样式如下：

html, body {
  height: 100%;
  margin: 0;
}

.container,
.container__sidebar,
.container__main {
  height: 100%;
}

使用 ​​float​​​ 和 ​​margin​​

.container__sidebar {
  width: 210px;
  float: left;
}

.container__sidebar {
  margin-left: 210px;
  overflow: auto;
}

使用 ​​float​​​ 和 ​​calc()​​

.container__sidebar {
  width: 210px;
  float: left;
}
.container__main {
  width: calc(100% - 210px);
  overflow: auto;
}

使用 ​​absolute​​

.container__sidebar { 
  position: absolute;
  left: 0;
  top: 0;
  width: 30%; 
}

.container__main { 
  position: absolute;
  right: 0;
  top: 0;
  width: calc(100% - 30%);
  overflow: auto;
}

使用 ​​flex​​

.container {
  display: flex;
}

.container__sidebar {
  width: 30%;
}

.container__main {
  flex: 1;
  overflow: auto;
}

使用 ​​grid​​

.container {
  display: grid;
  grid-template-columns: minmax(150px, 30%) 1fr;
}

​​查看效果​​