-
Notifications
You must be signed in to change notification settings - Fork 0
/
qq-mail-flex.html
181 lines (172 loc) · 8.47 KB
/
qq-mail-flex.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
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=qq-mail-lfex.html, initial-scale=1.0">
<title>Document</title>
<style>
body {
margin: 0;
}
header {
box-sizing: border-box;
width: 100%;
height: 100px;
border: 1px solid black;
background-color: burlywood;
}
div {
display: flex;
}
div aside {
display: flex;
border: 1px solid black;
overflow: auto;
flex: 2;
height: calc(100vh - 100px);
background-color: chartreuse;
}
article {
flex: 7;
display: flex;
border: 1px solid black;
box-sizing: border-box;
height: calc(100vh - 100px);
overflow: auto;
background-color: cyan;
}
</style>
</head>
<body>
<header></header>
<div class="main">
<aside>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</aside>
<article>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore corrupti consectetur dolore impedit culpa, omnis incidunt minima voluptatum facere mollitia! Quo asperiores ratione quis qui. Eligendi, quas? Non, nam nulla. Dolores praesentium ratione
vel nulla hic animi placeat nemo dolorum, fugiat, ut iure perspiciatis quaerat accusantium debitis! Ipsum nemo illum soluta laudantium qui? Tempora quas est iusto alias illum animi! Temporibus consectetur molestiae dicta laborum nam vel, tempore
incidunt. Necessitatibus repudiandae maiores iste corporis officia, dolore facilis perspiciatis? Tenetur rerum aliquid fugit sequi veniam necessitatibus aspernatur ex reiciendis non asperiores. Odit, reprehenderit! Labore, hic voluptate culpa
at ad, tempora qui, cupiditate velit aliquam possimus magnam deleniti facilis non fuga excepturi vero vitae consequatur maxime aliquid! Eligendi, nesciunt. Consequatur, corrupti eius. Accusamus architecto impedit, consectetur, sunt quo adipisci
odio aspernatur commodi sequi modi veniam cumque facilis doloribus quod, ad delectus dolores maiores saepe tempora nulla sit at repellat! Perferendis, nisi porro. Consequuntur animi explicabo inventore sint, commodi possimus ipsam laboriosam
eveniet aperiam saepe rem modi corporis aspernatur dolores, dolor nisi. Delectus dolores dolore temporibus dolor, impedit expedita quos! Ad, odio earum! Vitae reiciendis sapiente sed molestias provident veritatis unde! Delectus eveniet illum
fuga esse, voluptatem ex doloremque, recusandae reprehenderit omnis sed quam soluta voluptate molestias, deserunt quod deleniti sequi impedit aliquam! Recusandae quod iure commodi asperiores, architecto ipsum doloremque! Veniam ex suscipit
atque porro, qui fuga ea eaque? Doloremque itaque, aliquam, molestiae autem, quidem quam eius eligendi officia nesciunt rerum sequi? Dolor voluptate perspiciatis corrupti delectus distinctio, culpa placeat atque temporibus esse rem? Eius eaque,
debitis, id soluta harum deleniti atque a numquam porro unde, dicta ex explicabo. Maxime, laboriosam nulla. In, aliquid perferendis. Natus suscipit, nulla debitis facere culpa adipisci? Assumenda, inventore alias facilis quo pariatur eligendi
provident error, quidem, vel odit aut! Praesentium hic quis autem. Laborum, est nihil. Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum architecto quis alias, est iusto id odit officia sequi expedita necessitatibus magni blanditiis
illum distinctio. Earum saepe eligendi praesentium repellendus! Accusamus! Quaerat vitae dolor expedita! Nesciunt distinctio, omnis facilis delectus id laborum ad ut laboriosam rem placeat, mollitia doloribus nemo a aut? Quaerat eveniet dolor
magni numquam nostrum porro exercitationem suscipit! Quaerat facilis veniam cum aliquam. Expedita soluta hic magnam ipsam beatae placeat incidunt repudiandae molestias amet laboriosam. Natus hic ducimus iure? Suscipit nam placeat debitis,
consequatur explicabo laudantium quasi dolore. Id sunt aliquam voluptatibus molestiae commodi eligendi expedita officia doloremque nesciunt totam saepe corrupti, voluptate sapiente architecto quas soluta excepturi mollitia odit repellat veniam
magni minima placeat porro? Commodi, facilis. Sit, eius iusto. Qui libero officia alias facilis rem aliquid temporibus praesentium mollitia itaque odio natus, perferendis cumque? Mollitia sapiente culpa quia dolorem ratione molestiae voluptatem
molestias excepturi doloremque temporibus! Est facere nihil commodi aliquid perspiciatis? Voluptas, iusto laboriosam, dolor facilis eveniet esse reiciendis harum, doloremque eos quos sunt natus quas cumque odio maiores iste quia vel sed facere
incidunt. Veniam illum animi odio nostrum aperiam mollitia at, nobis culpa vero hic aliquam maxime quos. Sequi et repellat modi sapiente voluptatem? Sequi eaque placeat nesciunt culpa, minus facere harum inventore! Voluptate distinctio non
quas suscipit veritatis iste in voluptatum libero, alias laudantium accusantium, corrupti repellat reiciendis incidunt ad itaque quia minus totam! Placeat illum aspernatur adipisci enim consequatur, porro quia! Nesciunt fuga temporibus dolores
dolor aspernatur ut voluptates saepe. Doloribus ullam illum aperiam quas expedita nemo rem atque a consectetur reprehenderit, et ad, reiciendis ipsum quo fugiat sequi odit tempore. Et ipsum officia laudantium dolore nobis sequi modi molestiae
eos, voluptatibus accusantium, incidunt cum rerum animi sunt laboriosam omnis perferendis dolorum reiciendis quaerat possimus. Dolores mollitia unde voluptates incidunt amet!
</article>
</div>
</body>
</html>