多栏布局（二）--上下栏布局

发表于 | 更新于: | 分类于 | | 阅读次数:
字数统计: 1.3k 字 | 阅读时长 ≈ 6 分钟
本篇文章将列举多栏布局中的上下和上中下布局方式

1 上固定，下自适应

1.1 absolute 解决方案

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
<style>
    html,body {
        margin: 0;
        padding: 0;
        height: 100%;
        overflow: hidden;
    }
    div {
        width: 100%;
    }
    .top {
        position: absolute;
        top: 0;
        height: 100px;
        background: red;
    }
    .bottom {
        position: absolute;
        top: 100px;
        bottom: 0;
        overflow: auto;
        background: yellowgreen;
    }
	/* 查看滚动效果 */
    div p{
        height: 300px;
        line-height: 300px;
    }
</style>

<div class="top"></div>
<div class="bottom">
    <p>增加高度</p>
    <p>增加高度</p>
    <p>增加高度</p>
</div>

1.2 absolute-fixed 解决方案

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
<style>
    html,body {
        margin: 0;
        padding: 0;
        height: 100%;
        overflow: hidden;
    }
    div {
        width: 100%;
    }
    .top {
        position: absolute;
        top: 0;
        height: 100px;
        background: red;
    }
    .bottom {
        position: fixed;
        top: 100px;
        bottom: 0;
        overflow: auto;
        background: yellowgreen;
    }
    /* 查看滚动效果 */
    div p{
        height: 300px;
        line-height: 300px;
    }
</style>

<div class="top"></div>
<div class="bottom">
    <p>增加高度</p>
    <p>增加高度</p>
    <p>增加高度</p>
</div>

1.3 fixed-absolute 解决方案

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
<style>
    html,body {
        margin: 0;
        padding: 0;
        height: 100%;
        overflow: hidden;
    }
    div {
        width: 100%;
    }
    .top {
        position: fixed;
        top: 0;
        height: 100px;
        background: red;
    }
    .bottom {
        position: absolute;
        top: 100px;
        bottom: 0;
        overflow: auto;
        background: yellowgreen;
    }
    /* 查看滚动效果 */
    div p{
        height: 300px;
        line-height: 300px;
    }
</style>

<div class="top"></div>
<div class="bottom">
    <p>增加高度</p>
    <p>增加高度</p>
    <p>增加高度</p>
</div>

其实就是用定位实现，方案1全是绝对定位absolute，方案2和方案3就是一个是绝对定位absolute另一个是固定定位fixed；后面的下固定，上自适应和上下自适应，中间自适应也是相同的道理。是不是很简单

2 下固定，上自适应

2.1 absolute 解决方案

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
<style>
    html,body {
        margin: 0;
        padding: 0;
        height: 100%;
        overflow: hidden;
    }
    div {
        width: 100%;
    }
    .top {
        position: absolute;
        top: 0;
        bottom: 100px;
        overflow: auto;
        background: yellowgreen;
    }
    .bottom {
        position: absolute;
        bottom: 0;
        height: 100px;
        background: red;
    }
    /* 查看滚动效果 */
    div p{
        height: 300px;
        line-height: 300px;
    }
</style>

<div class="top">
    <p>增加高度</p>
    <p>增加高度</p>
    <p>增加高度</p>
</div>
<div class="bottom"></div>

2.2 absolute-fixed 解决方案

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
<style>
    html,body {
        margin: 0;
        padding: 0;
        height: 100%;
        overflow: hidden;
    }
    div {
        width: 100%;
    }
    .top {
        position: fixed;
        top: 0;
        bottom: 100px;
        overflow: auto;
        background: yellowgreen;
    }
    .bottom {
        position: absolute;
        bottom: 0;
        height: 100px;
        background: red;
    }
    /* 查看滚动效果 */
    div p {
        height: 300px;
        line-height: 300px;
    }
</style>

<div class="top">
    <p>增加高度</p>
    <p>增加高度</p>
    <p>增加高度</p>
</div>
<div class="bottom"></div>

2.3 fixed-absolute 解决方案

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
<style>
    html,body {
        margin: 0;
        padding: 0;
        height: 100%;
        overflow: hidden;
    }
    div {
        width: 100%;
    }
    .top {
        position: absolute;
        top: 0;
        bottom: 100px;
        overflow: auto;
        background: yellowgreen;
    }
    .bottom {
        position: fixed;
        bottom: 0;
        height: 100px;
        background: red;
    }
    /* 查看滚动效果 */
    div p {
        height: 300px;
        line-height: 300px;
    }
</style>
</head>

<body>
<div class="top">
    <p>增加高度</p>
    <p>增加高度</p>
    <p>增加高度</p>
</div>
<div class="bottom"></div>

3 上下固定，中间自适应

3.1 absolute 解决方案

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
<style>
    html,body {
        margin: 0;
        padding: 0;
        height: 100%;
        overflow: hidden;
    }
    div {
        width: 100%;
    }
    .top {
        position: absolute;
        top: 0;
        height: 100px;
        background: yellow;
    }
    .bottom {
        position: absolute;
        bottom: 0;
        height: 100px;
        background: red;
    }
    .center{
        position: absolute;
        top: 100px;
        bottom: 100px;
        overflow: auto;
        background: yellowgreen;
    }
    /* 查看滚动效果 */
    div p {
        height: 300px;
        line-height: 300px;
    }
</style>

<div class="top"></div>
<div class="center">
    <p>增加高度</p>
    <p>增加高度</p>
    <p>增加高度</p>
</div>
<div class="bottom"></div>

3.2 absolute-fixed 解决方案

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
<style>
    html,body {
        margin: 0;
        padding: 0;
        height: 100%;
        overflow: hidden;
    }
    div {
        width: 100%;
    }
    .top {
        position: absolute;
        top: 0;
        height: 100px;
        background: yellow;
    }
    .bottom {
        position: absolute;
        bottom: 0;
        height: 100px;
        background: red;
    }
    .center{
        position: fixed;
        top: 100px;
        bottom: 100px;
        overflow: auto;
        background: yellowgreen;
    }
    /* 查看滚动效果 */
    div p {
        height: 300px;
        line-height: 300px;
    }
</style>

<div class="top"></div>
<div class="center">
    <p>增加高度</p>
    <p>增加高度</p>
    <p>增加高度</p>
</div>
<div class="bottom"></div>

3.3 fixed-absolute 解决方案

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
<style>
    html,body {
        margin: 0;
        padding: 0;
        height: 100%;
        overflow: hidden;
    }
    div {
        width: 100%;
    }
    .top {
        position: fixed;
        top: 0;
        height: 100px;
        background: yellow;
    }
    .bottom {
        position: fixed;
        bottom: 0;
        height: 100px;
        background: red;
    }
    .center{
        position: absolute;
        top: 100px;
        bottom: 100px;
        overflow: auto;
        background: yellowgreen;
    }
    /* 查看滚动效果 */
    div p {
        height: 300px;
        line-height: 300px;
    }
</style>

<div class="top"></div>
<div class="center">
    <p>增加高度</p>
    <p>增加高度</p>
    <p>增加高度</p>
</div>
<div class="bottom"></div>

需要注意的一点就是，这种布局，一般都会设置html和body高度100%，并且溢出隐藏overflow:hidden;而自适应的用来放内容的那一部分设置溢出自适应overflow:auto;这样滚动条就会出现在这一部分，而不是整个页面

坚持原创技术分享，您的支持将鼓励我继续创作！