记录日常 CSS 练习的小知识点 —— 布局问题
布局问题
头部固定
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
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>头部固定</title>
<style>
*{
padding: 0;
margin:0;
}
.header {
width: 100%;
background: springgreen;
height: 100px;
position: fixed;
top: 0;
left: 0;
}
.first-screen{
height: 100vh;
box-sizing: border-box;
padding-top: 100px;
background: red;
}
.second-screen{
height: 200px;
background: #ace;
}
</style>
</head>
<body>
<div class="header">
我是头部
</div>
<div class="first-screen">
我是第一屏
</div>
<div class="second-screen">
我是后面的内容
</div>
</body>
</html>头尾固定中间滚动-css
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
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>头尾固定，中间滚动-css-absolute</title>
<style>
*{
padding: 0;
margin:0;
}
.header {
width: 100%;
background: springgreen;
height: 100px;
/* position: absolute; */
position: fixed;
top: 0;
}
.body {
position: absolute;
top: 100px;
bottom: 100px;
overflow-y: scroll;
width: 100%;
}
.c{
height: 1000px;
}
.footer {
width: 100%;
background: goldenrod;
height: 100px;
/* position: absolute; */
position: fixed;
bottom: 0;
}
</style>
</head>
<body>
<div class="header">
我是头部
</div>
<div class="body">
我是中间内容层
<div class="c">
</div>
</div>
<div class="footer">
我是尾部
</div>
</body>
</html>头尾固定中间滚动-flex
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
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>头尾固定，中间滚动-flex</title>
<style>
*{
padding: 0;
margin:0;
}
html, body {
font-family: sans-serif;
height: 100%;
width: 100%;
}
.container {
display: flex;
/*关键， flex布局*/
flex-direction: column;
/*关键，三块主题column摆放。*/
height: 100%;
/*关键，设置高度为可见高度的100 % ；*/
}
.header {
width: 100%;
background: springgreen;
}
.body {
flex: 1;
/*关键， 填充剩余空间*/
width: 100%;
background: lightyellow;
overflow-y: scroll;
/*关键，超出部分滚动*/
}
.c{
height: 1000px;
}
.footer {
width: 100%;
background: goldenrod;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
我是头部
</div>
<div class="body">
我是中间内容层
<div class="c">
</div>
</div>
<div class="footer">
我是尾部
</div>
</div>
</body>
</html>伸缩三栏布局
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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Title</title>
<link rel="stylesheet" href="e.css" />
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
height: 100%;
color: #fff;
}
body {
min-width: 100%;
/*设置body为伸缩容器*/
display: -webkit-box; /*旧版本：ios 6-,safari 3.1-6*/
display: -moz-box; /*旧版本：firefox 19-*/
display: -ms-flexbox; /*混合版本：IE10+*/
display: -webkit-flex; /*新版本：Chrome*/
display: flex; /*标准规范*/
/*伸缩项目换行*/
/*旧版本：设置伸缩流*/
-moz-box-orient: vertical;
-webkit-box-orient: vertical;
-moz-box-direction: normal;
-webkit-box-direction: normal;
/*旧版本：伸缩项目换行*/
-moz-box-lines: multiple;
-webkit-box-lines: multiple;
-webkit-flex-flow: column wrap;
/*混合版本：伸缩流方向与伸缩项目换行*/
-ms-flex-flow: column wrap;
/*最新版本：伸缩流方向与伸缩项目换行*/
flex-flow: column wrap;
justify-content: start;
}
header {
background: hsla(200, 10%, 70%, 0.5);
min-height: 100px;
width: 100%;
padding: 10px 20px;
}
section {
margin: 20px 0;
/*设置section为伸缩容器*/
display: -webkit-box; /*旧版本：ios 6-,safari 3.1-6*/
display: -moz-box; /*旧版本：firefox 19-*/
display: -ms-flexbox; /*混合版本：IE10+*/
display: -webkit-flex; /*新版本：Chrome*/
display: flex; /*标准规范*/
/*伸缩项目换行*/
/*旧版本：设置伸缩流*/
-moz-box-orient: horizontal;
-webkit-box-orient: horizontal;
-moz-box-direction: normal;
-webkit-box-direction: normal;
/*旧版本：伸缩项目换行*/
-moz-box-lines: multiple;
-webkit-box-lines: multiple;
-webkit-flex-flow: row wrap;
/*混合版本：伸缩流方向与伸缩项目换行*/
-ms-flex-flow: row wrap;
/*最新版本：伸缩流方向与伸缩项目换行*/
flex-flow: row wrap;
justify-content: start;
/*设置伸缩性:可以让元素自适应高度*/
-webkit-box-flex: 1;
-moz-box-flex: 1;
-ms-flex: 1;
-webkit-flex: 1;
flex: 1;
/*侧轴排列方式*/
-moz-box-align: stretch;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
-webkit-align-items: stretch;
align-items: stretch;
}
article {
/*设置伸缩性*/
-webkit-box-flex: 1;
-moz-box-flex: 1;
-ms-flex: 1;
-webkit-flex: 1;
flex: 1;
/*重新排列顺序*/
/*旧版本*/
-moz-box-ordinal-group: 2;
-webkit-box-ordinal-group: 2;
/*混合版本*/
-ms-flex-order: 2;
/*新版本*/
-webkit-order: 2;
order: 2;
background: yellowgreen;
margin: 0 10px;
}
aside {
width: 50px;
/*重新排列顺序*/
/*旧版本*/
-moz-box-ordinal-group: 3;
-webkit-box-ordinal-group: 3;
/*混合版本*/
-ms-flex-order: 3;
/*新版本*/
-webkit-order: 3;
order: 3;
background: salmon;
}
nav {
width: 50px;
/*重新排列顺序*/
/*旧版本*/
-moz-box-ordinal-group: 1;
-webkit-box-ordinal-group: 1;
/*混合版本*/
-ms-flex-order: 1;
/*新版本*/
-webkit-order: 1;
order: 1;
background: salmon;
}
footer {
background: hsla(250, 50%, 80%, 0.9);
min-height: 60px;
min-width: 100%;
padding: 1%;
-webkit-order: 3;
order: 3;
}
</style>
</head>
<body>
<h1 style="height:50px;background:red;">左右两边宽度一定，中间自适应</h1>
<header>我是页眉</header>
<section>
<article>我是主内容</article>
<nav>我是侧边导航栏</nav>
<aside>我是右边栏</aside>
</section>
<footer>我是页脚</footer>
</body>
</html>