距离上一次更新该文章已经过了 686 天，文章所描述的內容可能已经发生变化，请留意。
- 公共css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| .body {
margin: 0;
}
.header, .footer, .article, .aside {
color: #fff;
min-height: 60px;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
.header, .footer {
background-color: #7dbcea;
}
.aside {
background-color: #3ba0e9;
}
.article {
min-height: 300px;
background-color: #108ee9;
}
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| <view class="body">
<view class="header">
header
</view>
<view class="content">
<view class="article">
article
</view>
<view class="footer">
footer
</view>
</view>
</view>
.body {
min-height: 100vh;
display: flex;
flex-direction: column;
}
.article {
flex: auto;
}
|
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
| <view class="body">
<view class="header">
header
</view>
<view class="content">
<view class="aside">
aside
</view>
<view class="article">
article
</view>
</view>
<view class="footer">
footer
</view>
</view>
.body {
min-height: 100vh;
display: flex;
flex-direction: column;
}
.content {
flex: auto;
display: flex;
}
.content .article {
flex: auto;
}
|
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
| <view class="body">
<view class="aside">
aside
</view>
<view class="content">
<view class="header">
header
</view>
<view class="article">
article
</view>
<view class="footer">
footer
</view>
</view>
</view>
.body {
min-height: 100vh;
display: flex;
}
.aside {
flex: none;
}
.content {
flex: auto;
display: flex;
flex-direction: column;
}
.content .article {
flex: auto;
}
|
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
| <view class="body">
<view class="header">
header
</view>
<view class="article">
article
</view>
<view class="footer">
footer
</view>
</view>
.body {
min-height: 100vh;
display: flex;
flex-direction: column;
padding-top: 60px;
}
.header {
height: 60px;
position: fixed;
top: 0;
left: 0;
right: 0;
padding: 0;
}
.article {
flex: auto;
height: 1000px;
}
|
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
| <view class="body">
<view class="aside">
<p>item</p>
<p>item</p>
<!-- many items -->
<p>item</p>
</view>
<view class="content">
<view class="header">
header
</view>
<view class="article">
article
</view>
<view class="footer">
footer
</view>
</view>
</view>
.body {
height: 100vh;
display: flex;
}
.aside {
flex: none;
width: 100px;
overflow-y: auto;
display: block;
}
.content {
flex: auto;
display: flex;
flex-direction: column;
overflow-y: auto;
}
.content .article {
flex: auto;
}
|
