CSS实现上半内容高度动态变化，下半自动填满且内部嵌套可滚动区域

最终要达成的布局

1. 页面整体为左右布局
2. 左侧内部分为上下布局（上为高度不固定的容器，下部分需要填满左侧栏容器剩余空间）
3. 下部分还嵌套分为上下布局（上为高度固定的标题，下部分为可展示超出上下高度可滚动的列表）

代码结构

HTML：

其实结构就如上述 最终布局描述的一样。
类名为class的容器为左侧栏，id为map的容器为右侧主要内容区域。

核心实现为利用flex实现第一层结构的下半部分自动填充剩余部分。
而需要滚动的区域始终需要一个确切高度值，之所以能够实现滚动区域也自适应，是因为滚动区域用绝对定位相对它的父容器——左侧栏下半部分。

左侧栏使用flex布局，query区域不做任何限制，高度可以变化。下半部分query-data部分使用flex-grow: 1使其可以填满左侧栏剩余部分空间。query-data的header为固定高度，所以可滚动区域需使用绝对定位相对query-data容器进行定位（query-data容器需position: relative），top设为header的高度。

核心CSS如下：

.aside {
  position: absolute;
  left: 0;
  height: 100%;
  width: 200px;
  display: flex;
  flex-direction: column;
}

.query-data {
  flex-grow: 1;
  position: relative;
}
.header {
  height: 40px;
}
.data-list {
  overflow: auto;
  position: absolute;
  bottom: 0;
  top: 40px;
  width: 100%;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

结语

推荐使用 codesandbox 进行代码预览，并可以自行修改看到效果。
希望这个思路能够帮到有需要的人，现在暂时无法实现这里面的可滚动区域动态变化，毕竟与可滚动区域同级的查询结果标题有仍然是固定高度，尝试过仍适用flex-grow和flex-shrink属性进行动态变化，但无法实现。如果有朋友有思路欢迎评论。

下面贴出完整代码，以方便无法浏览codesandbox的朋友。

 


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83