当前位置：网站首页>侧边栏布局

侧边栏布局

2022-07-19 09:36:00 【51CTO】

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

       
       <div class="container">
       
  <!-- Sidebar -->
       
  <aside class="container__sidebar">...</aside>
       
  <!-- Main -->
       
  <main class="container__main">...</main>
       
</div>
      
1.
2.
3.
4.
5.
6.
7.

基本样式如下：

       
       html, body {
       
  height: 100%;
       
  margin: 0;
       
}
       
.container,
       
.container__sidebar,
       
.container__main {
       
  height: 100%;
       
}
      
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.

使用 `float` 和 `margin`

       
       .container__sidebar {
       
  width: 210px;
       
  float: left;
       
}
       
.container__sidebar {
       
  margin-left: 210px;
       
  overflow: auto;
       
}
      
1.
2.
3.
4.
5.
6.
7.
8.
9.

使用 `float` 和 `calc()`

       
       .container__sidebar {
       
  width: 210px;
       
  float: left;
       
}
       
.container__main {
       
  width: calc(100% - 210px);
       
  overflow: auto;
       
}
      
1.
2.
3.
4.
5.
6.
7.
8.

使用 `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;
       
}
      
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.

使用 `flex`

       
       .container {
       
  display: flex;
       
}
       
.container__sidebar {
       
  width: 30%;
       
}
       
.container__main {
       
  flex: 1;
       
  overflow: auto;
       
}
      
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.

使用 `grid`

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

查看效果

原网站

版权声明
本文为[51CTO]所创，转载请带上原文链接，感谢
https://blog.51cto.com/lion/5484196

当前位置：网站首页>侧边栏布局

侧边栏布局

使用 `float` 和 `margin`

使用 `float` 和 `calc()`

使用 `absolute`

使用 `flex`

使用 `grid`

边栏推荐

猜你喜欢

随机推荐

当前位置：网站首页>侧边栏布局

侧边栏布局

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

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

使用 ​​absolute​​

使用 ​​flex​​

使用 ​​grid​​

边栏推荐

猜你喜欢

随机推荐

使用 `float` 和 `margin`

使用 `float` 和 `calc()`

使用 `absolute`

使用 `flex`

使用 `grid`