├── README.md ├── center ├── README.md └── index.html ├── column ├── README.md └── index.html ├── float ├── README.md └── index.html ├── layout2_01 ├── README.md └── index.html ├── layout2_02 ├── README.md └── index.html ├── layout3_01 ├── README.md └── index.html ├── layout3_02 ├── README.md └── index.html ├── vertical_01 ├── README.md ├── index_01_flex.html ├── index_02_position.html ├── index_03_table.html └── index_04_grid.html └── vertical_02 ├── README.md ├── index_01_flex.html ├── index_02_position.html ├── index_03_table.html └── index_04_grid.html /README.md: -------------------------------------------------------------------------------- 1 | # css-layout 2 | 前端页面布局知识梳理，欢迎补充。 3 | 4 | ### 水平布局 5 | 6 | * [固定高度，水平两列布局，左侧固定，右侧自适应](./layout2_01/) 7 | * [未知高度，水平两列布局，左侧固定，右侧自适应](./layout2_02/) 8 | * [固定高度，水平三列布局，左右固定，中间自适应](./layout3_01/) 9 | * [未知高度，水平三列布局，左右固定，中间自适应](./layout3_02/) 10 | 11 | ### 垂直布局 12 | * [上方固定，下方自适应](./vertical_01/) 13 | * [上下固定，中间自适应](./vertical_02/) 14 | 15 | 16 | ### 居中布局 17 | * [居中布局](./center/) 18 | 19 | ### 其他布局 20 | * [靠内容浮动](./float/) 21 | * [瀑布流布局](./column/) 22 | 23 | 24 | 25 | ### 参考资料 26 | - [使用 CSS 弹性盒子](https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes) 27 | - [Flex 布局教程：语法篇](http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html) 28 | - [Flex 布局教程：实例篇](http://www.ruanyifeng.com/blog/2015/07/flex-examples.html) 29 | - [网格布局](https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Grid_Layout) -------------------------------------------------------------------------------- /center/README.md: -------------------------------------------------------------------------------- 1 | # 居中布局 2 | 3 | ``` 4 | 布局要求：外层大小不定，内层大小不定，同层居中 5 | ``` 6 | 7 | html 8 | ```html 9 |
10 |
11 |
12 | ``` 13 | 14 | 通用css 15 | ```css 16 | .box{ 17 | width: 200px; 18 | height: 200px; 19 | border: 1px solid #ccc; 20 | } 21 | 22 | .child{ 23 | width: 100px; 24 | height: 100px; 25 | background: yellow; 26 | text-align: center; 27 | line-height: 100px; 28 | } 29 | 30 | ``` 31 | 32 | ### 使用flex布局 33 | 34 | ```css 35 | .flex{ 36 | display: flex; 37 | justify-content: center; 38 | align-items: center; 39 | } 40 | ``` 41 | 42 | 43 | ### 使用定位布局 44 | ```css 45 | .position{ 46 | position: relative; 47 | } 48 | 49 | .position .child{ 50 | position: absolute; 51 | left: 50%; 52 | top: 50%; 53 | /*margin:-50px 0 0 -50px; */ 54 | transform: translate(-50%, -50%); /* 50%为自身尺寸的一半 */ 55 | } 56 | ``` 57 | 58 | 59 | ### 使用表格布局 60 | ```css 61 | .table{ 62 | display: table-cell; 63 | text-align: center; 64 | vertical-align: middle; 65 | } 66 | .table .child{ 67 | display: inline-block; 68 | } 69 | ``` 70 | 71 | 72 | ### 使用网格布局 73 | 74 | ```css 75 | .grid{ 76 | display: grid; 77 | justify-content: center; 78 | align-items: center; 79 | } 80 | ``` -------------------------------------------------------------------------------- /center/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 上方固定，下方自适应 7 | 60 | 61 | 62 | 63 |
64 |
弹性布局
65 |
66 | 67 |
68 |
表格布局
69 |
70 | 71 |
72 |
绝对定位
73 |
74 | 75 |
76 |
网格布局
77 |
78 | 79 | -------------------------------------------------------------------------------- /column/README.md: -------------------------------------------------------------------------------- 1 | # 居中布局 2 | 3 | ``` 4 | 布局要求：4列瀑布流 5 | ``` 6 | 7 | html 8 | ```html 9 |
10 |
1
11 |
2
12 |
3
13 |
4
14 |
5
15 |
6
16 |
8
17 |
9
18 |
10
19 |
11
20 |
21 | ``` 22 | 23 | ```css 24 | section{ 25 | column-count: 4; 26 | column-gap: 20px; 27 | } 28 | article{ 29 | background: #eee; 30 | margin-bottom: 20px; 31 | break-inside: avoid; 32 | } 33 | .n1{height: 280px;} 34 | .n2{height: 450px;} 35 | .n3{height: 360px;} 36 | .n4{height: 520px;} 37 | .n5{height: 410px;} 38 | .n6{height: 260px;} 39 | .n7{height: 760px;} 40 | .n8{height: 310px;} 41 | .n9{height: 270px;} 42 | .n10{height: 160px;} 43 | ``` -------------------------------------------------------------------------------- /column/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 靠内容浮动布局 7 | 28 | 29 | 30 |
31 |
1
32 |
2
33 |
3
34 |
4
35 |
5
36 |
6
37 |
8
38 |
9
39 |
10
40 |
11
41 |
42 | 43 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /float/README.md: -------------------------------------------------------------------------------- 1 | # 居中布局 2 | 3 | ``` 4 | 布局要求：内容宽度1000px,左右两个块为100px宽高，靠近内容浮动 5 | ``` 6 | 7 | html 8 | ```html 9 |
10 |
Left
11 |
Right
12 | ``` 13 | 14 | ```css 15 | .box{ 16 | width: 1000px; 17 | height: 2000px; 18 | margin: auto; 19 | background: #eee; 20 | } 21 | .left,.right{ 22 | width: 100px; 23 | height: 100px; 24 | background: #222; 25 | position: fixed; 26 | color: #fff; 27 | text-align: center; 28 | line-height: 100px; 29 | } 30 | .left{ 31 | bottom: 100px; 32 | left: 50%; 33 | margin-left: -600px; 34 | } 35 | 36 | .right{ 37 | bottom: 100px; 38 | left: 50%; 39 | margin-left: 500px; 40 | } 41 | ``` -------------------------------------------------------------------------------- /float/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 靠内容浮动布局 7 | 35 | 36 | 37 | 38 |
39 |
Left
40 |
Right
41 | 42 | 43 | -------------------------------------------------------------------------------- /layout2_01/README.md: -------------------------------------------------------------------------------- 1 | # 已知高度两列布局 2 | 3 | ``` 4 | 布局要求：高度固定为100px,左边固定300px，右边自适应。 5 | ``` 6 | 7 | 根据以上要求，我们先写一些通用的css样式 8 | ```css 9 | *{margin: 0; padding: 0;} 10 | .left{background:#ccc; width: 300px;} 11 | .right{background:#eee;} 12 | .layout, .left, .right{height: 100px;} 13 | .layout{margin-bottom: 20px;} 14 | ``` 15 | 16 | ### 使用float布局 17 | 18 | css 19 | ```css 20 | .layout.float .left{float: left;} 21 | ``` 22 | html 23 | ```html 24 |
25 |
26 |
27 |
使用float布局
28 |
29 |
30 | ``` 31 | 32 | ### 使用flex布局 33 | css 34 | ```css 35 | .layout.flex article{ display: flex; } 36 | .layout.flex .right{flex-grow: 1;} 37 | ``` 38 | 39 | html 40 | ```html 41 |
42 |
43 |
44 |
使用flex布局
45 |
46 |
47 | ``` 48 | 49 | ### 使用定位布局 50 | 51 | css 52 | ```css 53 | .layout.absolute article{ position: relative; } 54 | .layout.absolute .left{position: absolute; left: 0; top: 0;} 55 | .layout.absolute .right{position: absolute; left: 300px; right: 0; top: 0;} 56 | ``` 57 | 58 | html 59 | ```html 60 |
61 |
62 |
63 |
使用定位布局
64 |
65 |
66 | ``` 67 | 68 | ### 使用表格布局 69 | 70 | css 71 | ```css 72 | .layout.table article{display: table; width: 100%;} 73 | .layout.table .left{display: table-cell;} 74 | .layout.table .right{display: table-cell;} 75 | ``` 76 | 77 | html 78 | ```html 79 |
80 |
81 |
82 |
使用表格布局
83 |
84 |
85 | ``` 86 | 87 | ### 使用网格布局 88 | 89 | css 90 | ```css 91 | .layout.grid article{display: grid; grid-template-columns:300px auto;} 92 | ``` 93 | 94 | html 95 | ```html 96 |
97 |
98 |
99 |
使用网格布局
100 |
101 |
102 | ``` -------------------------------------------------------------------------------- /layout2_01/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 已知高度，两列布局 7 | 34 | 35 | 36 | 37 |

已知高度，两列布局

38 |

布局要求：高度固定为100px,左边固定300px，右边自适应。

39 | 40 |
41 |
42 |
43 |
使用float布局
44 |
45 |
46 | 47 |
48 |
49 |
50 |
使用flex布局
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 | -------------------------------------------------------------------------------- /layout2_02/README.md: -------------------------------------------------------------------------------- 1 | # 未知高度，两列布局 2 | 3 | ``` 4 | 布局要求：左边固定300px，右边自适应，高度自适应 5 | ``` 6 | 7 | 根据以上要求，我们先写一些通用的css样式 8 | ```css 9 | body{margin: 0; padding: 0;} 10 | .left{background:#ccc; width: 300px;} 11 | .right{background:#eee;} 12 | .layout{margin-bottom: 20px;} 13 | ``` 14 | 15 | ### 使用float布局 16 | 17 | css 18 | ```css 19 | .layout.float article{overflow: hidden;} 20 | .layout.float .left{float: left;} 21 | .layout.float .right{overflow: hidden;} 22 | .layout.float .left, 23 | .layout.float .right{padding-bottom: 9999px; margin-bottom: -9999px;} 24 | ``` 25 | html 26 | ```html 27 |
28 |
29 |
left
30 |
31 |

float布局

32 |

float布局

33 |

float布局

34 |

float布局

35 |
36 |
37 |
38 | ``` 39 | 40 | ### 使用flex布局 41 | css 42 | ```css 43 | .layout.flex article{ display: flex; } 44 | .layout.flex .right{flex-grow: 1;} 45 | ``` 46 | 47 | html 48 | ```html 49 |
50 |
51 |
52 |

flex布局

53 |

flex布局

54 |

flex布局

55 |

flex布局

56 |
57 |
58 |

flex布局

59 |
60 |
61 |
62 | ``` 63 | 64 | ### 使用定位布局 65 | 66 | css 67 | ```css 68 | .layout.absolute article{ position: relative;} 69 | .layout.absolute .left{position: absolute; left: 0; top: 0; bottom: 0; } 70 | .layout.absolute .right{padding: 0 0 0 300px; overflow: hidden; } 71 | ``` 72 | 73 | html 74 | ```html 75 |
76 |
77 |
left
78 |
79 |

table布局

80 |

table布局

81 |

table布局

82 |

table布局

83 |
84 |
85 |
86 | ``` 87 | 88 | ### 使用表格布局 89 | 90 | css 91 | ```css 92 | .layout.table article{display: table; width: 100%;} 93 | .layout.table .left{display: table-cell;} 94 | .layout.table .right{display: table-cell;} 95 | ``` 96 | 97 | html 98 | ```html 99 |
100 |
101 |
left
102 |
103 |

定位布局

104 |

定位布局

105 |

定位布局

106 |
107 |
108 |
109 | ``` 110 | 111 | ### 使用网格布局 112 | 113 | css 114 | ```css 115 | .layout.grid article{display: grid; grid-template-columns:300px auto;} 116 | ``` 117 | 118 | html 119 | ```html 120 |
121 |
122 |
123 | left 124 |
125 |
126 |

网格布局

127 |

网格布局

128 |

网格布局

129 |

网格布局

130 |

网格布局

131 |
132 |
133 |
134 | ``` -------------------------------------------------------------------------------- /layout2_02/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | layout一行两列 7 | 38 | 39 | 40 | 41 |

未知高度，两列布局

42 |

布局要求：左边固定300px，右边自适应，高度自适应

43 | 44 |
45 |
46 |
left
47 |
48 |

float布局

49 |

float布局

50 |

float布局

51 |

float布局

52 |
53 |
54 |
55 | 56 |
57 |
58 |
59 |

flex布局

60 |

flex布局

61 |

flex布局

62 |

flex布局

63 |
64 |
65 |

flex布局

66 |
67 |
68 |
69 | 70 |
71 |
72 |
left
73 |
74 |

table布局

75 |

table布局

76 |

table布局

77 |

table布局

78 |
79 |
80 |
81 | 82 |
83 |
84 |
left
85 |
86 |

定位布局

87 |

定位布局

88 |

定位布局

89 |
90 |
91 |
92 | 93 |
94 |
95 |
96 | left 97 |
98 |
99 |

网格布局

100 |

网格布局

101 |

网格布局

102 |

网格布局

103 |

网格布局

104 |
105 |
106 |
107 | 108 | -------------------------------------------------------------------------------- /layout3_01/README.md: -------------------------------------------------------------------------------- 1 | # 已知高度，三列布局 2 | 3 | ``` 4 | 布局要求：高度固定为100px, 左边固定300px，右边200px 中间自适应。 5 | ``` 6 | 7 | 根据以上要求，我们先写一些通用的css样式 8 | ```css 9 | body{margin: 0; padding: 0;} 10 | .left{background:#ccc; width: 300px;} 11 | .center{background: yellow;} 12 | .right{background:#eee; width: 200px;} 13 | .layout, .left, .right, .center{height: 100px;} 14 | .layout{margin-bottom: 20px;} 15 | ``` 16 | 17 | ### 使用float布局 18 | 19 | css 20 | ```css 21 | .layout.float .left{float: left;} 22 | .layout.float .right{float: right;} 23 | ``` 24 | html 25 | ```html 26 |
27 |
28 |
left
29 |
right
30 |
使用float布局
31 |
32 |
33 | ``` 34 | 35 | ### 使用flex布局 36 | css 37 | ```css 38 | .layout.flex article{ display: flex; } 39 | .layout.flex .center{flex-grow: 1;} 40 | ``` 41 | 42 | html 43 | ```html 44 |
45 |
46 |
left
47 |
使用flex布局
48 |
right
49 |
50 |
51 | ``` 52 | 53 | ### 使用定位布局 54 | 55 | css 56 | ```css 57 | .layout.absolute article{ position: relative; } 58 | .layout.absolute .left{position: absolute; left: 0; top: 0;} 59 | .layout.absolute .right{position: absolute; right: 0; top: 0;} 60 | .layout.absolute .center{position: absolute; left: 300px; right: 200px; top: 0;} 61 | ``` 62 | 63 | html 64 | ```html 65 |
66 |
67 |
left
68 |
使用定位布局
69 |
right
70 |
71 |
72 | ``` 73 | 74 | ### 使用表格布局 75 | 76 | css 77 | ```css 78 | .layout.table article{display: table; width: 100%;} 79 | .layout.table .left{display: table-cell;} 80 | .layout.table .cetner{display: table-cell;} 81 | .layout.table .right{display: table-cell;} 82 | ``` 83 | 84 | html 85 | ```html 86 |
87 |
88 |
left
89 |
使用表格布局
90 |
right
91 |
92 |
93 | ``` 94 | 95 | ### 使用网格布局 96 | 97 | css 98 | ```css 99 | .layout.grid article{display: grid; grid-template-columns:300px auto 200px;} 100 | ``` 101 | 102 | html 103 | ```html 104 |
105 |
106 |
left
107 |
使用网格布局
108 |
right
109 |
110 |
111 | ``` -------------------------------------------------------------------------------- /layout3_01/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 三列布局 7 | 38 | 39 | 40 | 41 |

已知高度，三列布局

42 |

布局要求：高度固定为100px, 左边固定300px，右边200px 中间自适应。

43 | 44 |
45 |
46 |
left
47 |
right
48 |
使用float布局
49 |
50 |
51 | 52 |
53 |
54 |
left
55 |
使用flex布局
56 |
right
57 |
58 |
59 | 60 |
61 |
62 |
left
63 |
使用定位布局
64 |
right
65 |
66 |
67 | 68 |
69 |
70 |
left
71 |
使用表格布局
72 |
right
73 |
74 |
75 | 76 |
77 |
78 |
left
79 |
使用网格布局
80 |
right
81 |
82 |
83 | 84 | -------------------------------------------------------------------------------- /layout3_02/README.md: -------------------------------------------------------------------------------- 1 | # 未知高度，三列布局 2 | 3 | ``` 4 | 布局要求：左边固定300px，右边200px 中间自适应。高度自适应 5 | ``` 6 | 7 | 根据以上要求，我们先写一些通用的css样式 8 | ```css 9 | body{margin: 0; padding: 0;} 10 | .left{background:#ccc; width: 300px;} 11 | .center{background: yellow;} 12 | .right{background:#eee; width: 200px;} 13 | .layout, .left, .right, .center{height: 100px;} 14 | .layout{margin-bottom: 20px;} 15 | ``` 16 | 17 | ### 使用float布局 18 | 19 | css 20 | ```css 21 | .layout.float .left{float: left; } 22 | .layout.float .right{float: right;} 23 | .layout.float .center{overflow: hidden;} 24 | .layout.float .left, 25 | .layout.float .center, 26 | .layout.float .right{padding-bottom: 9999px;margin-bottom: -9999px;} 27 | .layout.float article{overflow: hidden;} 28 | ``` 29 | html 30 | ```html 31 |
32 |
33 |
left
34 |
right
35 |
36 |

使用float布局

37 |

使用float布局

38 |

使用float布局

39 |

使用float布局

40 |

使用float布局

41 |
42 |
43 |
44 | ``` 45 | 46 | ### 使用flex布局 47 | css 48 | ```css 49 | .layout.flex article{ display: flex; } 50 | .layout.flex .center{flex-grow: 1;} 51 | ``` 52 | 53 | html 54 | ```html 55 |
56 |
57 |
left
58 |
59 |

使用flex布局

60 |

使用flex布局

61 |

使用flex布局

62 |

使用flex布局

63 |

使用flex布局

64 |
65 |
right
66 |
67 |
68 | ``` 69 | 70 | ### 使用定位布局 71 | 72 | css 73 | ```css 74 | .layout.absolute article{ position: relative; } 75 | .layout.absolute .left{position: absolute; left: 0; top: 0; bottom: 0;} 76 | .layout.absolute .right{position: absolute; right: 0; top: 0; bottom: 0;} 77 | .layout.absolute .center{padding: 0 200px 0 300px; overflow: hidden;} 78 | ``` 79 | 80 | html 81 | ```html 82 |
83 |
84 |
85 |

使用定位布局

86 |

使用定位布局

87 |

使用定位布局

88 |

使用定位布局

89 |

使用定位布局

90 |
91 |
left
92 |
right
93 |
94 |
95 | ``` 96 | 97 | ### 使用表格布局 98 | 99 | css 100 | ```css 101 | .layout.table article{display: table; width: 100%;} 102 | .layout.table .left{display: table-cell;} 103 | .layout.table .center{display: table-cell;} 104 | .layout.table .right{display: table-cell;} 105 | ``` 106 | 107 | html 108 | ```html 109 |
110 |
111 |
left
112 |
113 |

使用表格布局

114 |

使用表格布局

115 |

使用表格布局

116 |

使用表格布局

117 |
118 |
right
119 |
120 |
121 | ``` 122 | 123 | ### 使用网格布局 124 | 125 | css 126 | ```css 127 | .layout.grid article{display: grid; grid-template-columns:300px auto 200px;} 128 | ``` 129 | 130 | html 131 | ```html 132 |
133 |
134 |
left
135 |
136 |

使用网格布局

137 |

使用网格布局

138 |

使用网格布局

139 |

使用网格布局

140 |

使用网格布局

141 |
142 |
right
143 |
144 |
145 | ``` -------------------------------------------------------------------------------- /layout3_02/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 三列布局 7 | 43 | 44 | 45 | 46 |

未知高度，三列布局

47 |

布局要求：左边固定300px，右边200px 中间自适应。高度自适应

48 | 49 |
50 |
51 |
left
52 |
right
53 |
54 |

使用float布局

55 |

使用float布局

56 |

使用float布局

57 |

使用float布局

58 |

使用float布局

59 |
60 |
61 |
62 | 63 |
64 |
65 |
left
66 |
67 |

使用flex布局

68 |

使用flex布局

69 |

使用flex布局

70 |

使用flex布局

71 |

使用flex布局

72 |
73 |
right
74 |
75 |
76 | 77 |
78 |
79 |
80 |

使用定位布局

81 |

使用定位布局

82 |

使用定位布局

83 |

使用定位布局

84 |

使用定位布局

85 |
86 |
left
87 |
right
88 |
89 |
90 | 91 |
92 |
93 |
left
94 |
95 |

使用表格布局

96 |

使用表格布局

97 |

使用表格布局

98 |

使用表格布局

99 |
100 |
right
101 |
102 |
103 | 104 |
105 |
106 |
left
107 |
108 |

使用网格布局

109 |

使用网格布局

110 |

使用网格布局

111 |

使用网格布局

112 |

使用网格布局

113 |
114 |
right
115 |
116 |
117 | 118 | -------------------------------------------------------------------------------- /vertical_01/README.md: -------------------------------------------------------------------------------- 1 | # 上方固定，下方自适应 2 | 3 | ``` 4 | 布局要求：上方固定100px,下方自适应。 5 | ``` 6 | 7 | ### 使用flex布局 8 | css 9 | ```css 10 | html,body{height: 100%;} 11 | body{margin: 0; padding: 0;} 12 | section{display: flex;flex-direction: column;height: 100%;} 13 | header{height: 100px;background: #eee;} 14 | article{background: yellow; overflow: hidden; flex-grow: 1;} 15 | ``` 16 | 17 | html 18 | ```html 19 |
20 |
我是顶部
21 |
22 |

上方固定，下方自适应

23 |

布局要求：上方固定100px,下方自适应。

24 |
25 |
26 | ``` 27 | 28 | ### 使用定位布局 29 | 30 | css 31 | ```css 32 | body{margin: 0; padding: 0;} 33 | header{height: 100px;background: #eee;} 34 | article{background: yellow; position: absolute;top: 100px; bottom: 0; right: 0; left: 0;} 35 | ``` 36 | 37 | html 38 | ```html 39 |
40 |
我是顶部
41 |
42 |

上方固定，下方自适应

43 |

布局要求：上方固定100px,下方自适应。

44 |
45 |
46 | ``` 47 | 48 | ### 使用表格布局 49 | 50 | css 51 | ```css 52 | html,body{height: 100%;} 53 | body{margin: 0; padding: 0;} 54 | section{display: table; width: 100%; height: 100%;} 55 | header{height: 100px;background: #eee; display: table-row;} 56 | article{background: yellow;display: table-row; } 57 | ``` 58 | 59 | html 60 | ```html 61 |
62 |
我是顶部
63 |
64 |

上方固定，下方自适应

65 |

布局要求：上方固定100px,下方自适应。

66 |
67 |
68 | ``` 69 | 70 | ### 使用网格布局 71 | 72 | css 73 | ```css 74 | html,body{height: 100%;} 75 | body{margin: 0; padding: 0;} 76 | section{width: 100%; height: 100%; display: grid; grid-template-rows:100px auto;} 77 | header{background: #eee;} 78 | article{background: yellow; } 79 | ``` 80 | 81 | html 82 | ```html 83 |
84 |
我是顶部
85 |
86 |

上方固定，下方自适应

87 |

布局要求：上方固定100px,下方自适应。

88 |
89 |
90 | ``` -------------------------------------------------------------------------------- /vertical_01/index_01_flex.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 上方固定，下方自适应 7 | 15 | 16 | 17 |
18 |
我是顶部
19 |
20 |

上方固定，下方自适应

21 |

布局要求：上方固定100px,下方自适应。

22 |
23 |
24 | 25 | 26 | -------------------------------------------------------------------------------- /vertical_01/index_02_position.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 上方固定，下方自适应 7 | 12 | 13 | 14 |
15 |
我是顶部
16 |
17 |

上方固定，下方自适应

18 |

布局要求：上方固定100px,下方自适应。

19 |
20 |
21 | 22 | -------------------------------------------------------------------------------- /vertical_01/index_03_table.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 上方固定，下方自适应 7 | 14 | 15 | 16 |
17 |
我是顶部
18 |
19 |

上方固定，下方自适应

20 |

布局要求：上方固定100px,下方自适应。

21 |
22 |
23 | 24 | -------------------------------------------------------------------------------- /vertical_01/index_04_grid.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 上方固定，下方自适应 7 | 14 | 15 | 16 |
17 |
我是顶部
18 |
19 |

上方固定，下方自适应

20 |

布局要求：上方固定100px,下方自适应。

21 |
22 |
23 | 24 | -------------------------------------------------------------------------------- /vertical_02/README.md: -------------------------------------------------------------------------------- 1 | # 上下固定，中间自适应 2 | 3 | ``` 4 | 布局要求：上下固定100px,中间自适应。 5 | ``` 6 | 7 | 8 | ```html 9 |
10 |
我是顶部
11 |
12 |

上下固定，中间自适应

13 |

布局要求：上下固定100px,中间自适应。

14 |
15 | 16 |
17 | ``` 18 | 19 | ### 使用flex布局 20 | css 21 | ```css 22 | html,body{height: 100%;} 23 | body{margin: 0; padding: 0;} 24 | section{display: flex;flex-direction: column;height: 100%;} 25 | header{height: 100px;background: #eee;} 26 | footer{height: 100px; background: #eee;} 27 | article{background: yellow; overflow: hidden; flex-grow: 1;} 28 | ``` 29 | 30 | 31 | 32 | ### 使用定位布局 33 | 34 | css 35 | ```css 36 | body{margin: 0; padding: 0;} 37 | header{height: 100px;background: #eee;} 38 | article{background: yellow; position: absolute;top: 100px; bottom: 100px; right: 0; left: 0;} 39 | footer{height: 100px;background: #eee; position: absolute; bottom: 0;right: 0; left: 0;} 40 | ``` 41 | 42 | 43 | 44 | ### 使用表格布局 45 | 46 | css 47 | ```css 48 | html,body{height: 100%;} 49 | body{margin: 0; padding: 0;} 50 | section{display: table; width: 100%; height: 100%;} 51 | header,footer{height: 100px;background: #eee; display: table-row;} 52 | article{background: yellow;display: table-row; } 53 | ``` 54 | 55 | 56 | ### 使用网格布局 57 | 58 | css 59 | ```css 60 | html,body{height: 100%;} 61 | body{margin: 0; padding: 0;} 62 | section{width: 100%; height: 100%; display: grid; grid-template-rows:100px auto 100px;} 63 | header{background: #eee;} 64 | article{background: yellow;} 65 | ``` -------------------------------------------------------------------------------- /vertical_02/index_01_flex.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 上下固定，中间自适应 7 | 16 | 17 | 18 |
19 |
我是顶部
20 |
21 |

上下固定，中间自适应

22 |

布局要求：上下固定100px,中间自适应。

23 |
24 | 25 |
26 | 27 | -------------------------------------------------------------------------------- /vertical_02/index_02_position.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 上方固定，下方自适应 7 | 13 | 14 | 15 |
16 |
我是顶部
17 |
18 |

上下固定，中间自适应

19 |

布局要求：上下固定100px,中间自适应。

20 |
21 | 22 |
23 | 24 | -------------------------------------------------------------------------------- /vertical_02/index_03_table.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 上方固定，下方自适应 7 | 14 | 15 | 16 |
17 |
我是顶部
18 |
19 |

上下固定，中间自适应

20 |

布局要求：上下固定100px,中间自适应。

21 |
22 | 23 |
24 | 25 | -------------------------------------------------------------------------------- /vertical_02/index_04_grid.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 上方固定，下方自适应 7 | 14 | 15 | 16 |
17 |
我是顶部
18 |
19 |

上下固定，中间自适应

20 |

布局要求：上下固定100px,中间自适应。

21 |
22 | 23 |
24 | 25 | --------------------------------------------------------------------------------