侧边栏布局.md

侧边栏布局

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

<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;
}

查看效果