display:flex;实战,flex-shrink的用法

flex-shrink的用法

页面要求自适应,搜索框的高度不是固定的,所以table的高度也就不能固定,table的高度随着搜索框的高度变化,页面不出现滚动条,纯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
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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;

}
html, body{
height: 100%;
width: 100%;
}
.wrap{
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
padding: 10px;
box-sizing: border-box;
}
.search-box{
flex-shrink: 0;
border: 1px solid #550000;
padding: 10px;
box-sizing: border-box;
}
.table-box{
flex: 1;
position: relative;
padding: 10px;
box-sizing: border-box;
margin-top: 10px;
}
.table{
position: absolute;
top: 0;
bottom: 30px;
left: 0;
right: 0;
overflow: auto;
border: 1px solid;
}
table{
height: 100%;
width: 100%;
}
.page{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
text-align: center;
border: 1px solid #110099;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="wrap">
<div class="search-box">
<span>姓名: <input type="text"></span>
<span>年龄: <input type="text"></span>
<span>姓名: <input type="text"></span>
<span>年龄: <input type="text"></span>
<span>姓名: <input type="text"></span>
<span>年龄: <input type="text"></span>
<span>姓名: <input type="text"></span>
<span>年龄: <input type="text"></span>
<span>姓名: <input type="text"></span>
<span>年龄: <input type="text"></span>
<span>姓名: <input type="text"></span>
<span>年龄: <input type="text"></span>
<span>姓名: <input type="text"></span>
<span>年龄: <input type="text"></span>
<span>姓名: <input type="text"></span>
<span>年龄: <input type="text"></span>
</div>
<div class="table-box">
<div class="table">
<table>
<th><td>姓名</td></th>
<tr><td>张三</td></tr>
<tr><td>张三</td></tr>
<tr><td>张三</td></tr>
<tr><td>张三</td></tr>
<tr><td>张三</td></tr>
<tr><td>张三</td></tr>
<tr><td>张三</td></tr>
<tr><td>张三</td></tr>
<tr><td>张三</td></tr>
<th><td>姓名</td></th>
<tr><td>张三</td></tr>
<tr><td>张三</td></tr>
<tr><td>张三</td></tr>
<tr><td>张三</td></tr>
<tr><td>张三</td></tr>
<tr><td>张三</td></tr>
<tr><td>张三</td></tr>
<tr><td>张三</td></tr>
<tr><td>张三</td></tr>
<th><td>姓名</td></th>
<tr><td>张三</td></tr>
<tr><td>张三</td></tr>
<tr><td>张三</td></tr>
<tr><td>张三</td></tr>
<tr><td>张三</td></tr>
<tr><td>张三</td></tr>
<tr><td>张三</td></tr>
<tr><td>张三</td></tr>
<tr><td>张三</td></tr>
<th><td>姓名</td></th>
<tr><td>张三</td></tr>
<tr><td>张三</td></tr>
<tr><td>张三</td></tr>
<tr><td>张三</td></tr>
<tr><td>张三</td></tr>
<tr><td>张三</td></tr>
<tr><td>张三</td></tr>
<tr><td>张三</td></tr>
<tr><td>张三</td></tr>
</table>
</div>
<div class="page">
page
</div>
</div>
</div>
</body>
</html>

唯一的麻烦是要从根元素就要设置height:100%