1. 1. 需求
  2. 2. 实现
不定高度的两栏布局实现
CSS
,

需求

一个左右两栏布局，其中左侧的高度根据内容撑开，右侧的内容高度不得超出左侧高度，超出自动出现滚动条。

实现

1
2
3
4
5
6
7
8
9
10
<div class="wrap">
  <div class="left-wrap">
    <div class="left">
      <ul>
        <li v-for="item in 100" :key="item">{{ item }}</li>
      </ul>
    </div>
  </div>
  <div class="right">content</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.wrap {
  display: flex;
  overflow: hidden;
}

.left-wrap {
  width: 100px;
  display: flex;
  flex-direction: column;
}

.left {
  height: 0;
  flex-grow: 1;
  overflow-y: auto;
  background-color: #e7ece7;
}

.right {
  flex: 1 1 0;
  height: 200px;
  background-color: #ffcfcb;
}

关键点在于在需要滚动的列表外层增加一个flex布局，并且设置 height: 0 和 flex-grow: 1，这样就会让左侧区域根据右侧内容高度撑开

Previous post
Next post