側(cè)邊欄布局象踊，它包含一個邊欄（固定的），一個主欄（可滾動的）棚壁。
<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;
}
