miao/qq-mail-position.html at main · BruceZhang-Pro/miao · GitHub

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
<!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>
        * {
            box-shadow: inset 0 0 1px red;
        }
        html {
            height: 100%;
        }
        body {
            margin: 0;
            position: fixed;
            height: 100%;
        }
        header {
            position: absolute;
            background-color: rgb(95, 158, 160);
            height: 100px;
        }
        aside {
            position: fixed;
            background-color: rgb(160, 82, 45);
            width: 200px;
            top: 100px;
            bottom: 0;
            overflow: auto;
        }
        main {
            position: relative;
            background-color: rgb(0, 128, 128);
            top: 100px;
            left: 200px;
            right: 0px;
            bottom: 0px;
            height: calc(100% - 100px);
            width: calc(100% - 200px);
            overflow: auto;
        }
    </style>
</head>
<body>
    <header>
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Rem aperiam fugiat tempore, sed perspiciatis mollitia commodi consectetur architecto ratione nesciunt omnis labore laborum beatae et doloremque molestias libero veritatis dignissimos. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Vel incidunt reprehenderit fugiat sequi eum nesciunt! Placeat ullam magnam ad incidunt numquam aspernatur, in nihil, distinctio officiis sed facilis illo odio.
    </header>
    <aside>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam cupiditate recusandae, aliquam voluptatem sed minus ratione error alias distinctio consectetur, accusamus unde! Aliquam tempore laboriosam, ex harum quisquam culpa nobis.
        Necessitatibus optio voluptate quasi nobis fugiat laborum minus itaque corporis nesciunt non omnis vitae eveniet, pariatur similique dolorum quos tempora. Est illum non quasi, aspernatur natus cum totam? Voluptatum, provident?
        Recusandae quibusdam dolor, ipsa voluptates accusantium iste quisquam? Asperiores explicabo minus fugiat vero odio ab tempore. Illo, unde corrupti aspernatur sunt assumenda dolore et nam harum minima dolorem? Consectetur, excepturi.
        Quam praesentium, nobis nesciunt sint doloremque neque repudiandae et dolorem tempore! Culpa dignissimos facere, tempore soluta incidunt quae cupiditate, corrupti neque velit totam unde molestias, inventore explicabo minus ea. Delectus.
        Nihil aperiam facere sequi atque quisquam veniam non error ea, dolorum numquam enim quam exercitationem explicabo! Atque aspernatur animi porro optio fugiat sequi sunt aut provident omnis iure, quam veniam.
        Reprehenderit, doloribus quasi! Repellat at vitae consectetur tempore dolor labore earum harum cum quod laboriosam reprehenderit, similique iusto quam fuga sapiente odio, veniam est qui vero eius ratione nesciunt sed.
        Beatae obcaecati dolore accusamus quo ullam aliquid similique voluptas, dolores dicta neque vero aut itaque voluptatem fugit magnam ex iure inventore assumenda tempore laborum quae minima ea animi error? Explicabo.
        Odit sequi alias dicta fuga quidem animi tenetur illo, reprehenderit ipsam id ipsum eveniet, voluptatibus quae tempora porro corporis. Deleniti voluptatum cupiditate reiciendis consectetur beatae! Expedita deleniti sit minus dicta.
        Eligendi saepe quod sunt, et iusto nostrum, vel autem qui asperiores facere totam esse aliquid placeat. Esse earum obcaecati at quo? Eius iure sunt, velit deserunt possimus minus nisi. Sed.
        Corporis ex quaerat enim facere a, reiciendis repellat mollitia incidunt atque? Voluptates voluptatum iste, provident eveniet repudiandae vel nobis nesciunt corporis nostrum cupiditate minima dignissimos ex doloribus accusamus repellendus rerum.
    </aside>
    <main>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum eum voluptate, aperiam earum provident officiis at ipsa et vitae, assumenda ad blanditiis numquam sint beatae illo? Quam ullam soluta velit?
        Blanditiis ducimus, unde repellat eos velit sapiente, animi consectetur reiciendis ullam quibusdam, quisquam delectus esse labore iusto deleniti id sunt. Consequatur, cum error? Illo eos veniam vero! Dignissimos, quam ea.
        Deleniti sed architecto laborum a neque illo saepe ipsam rem consequatur? Esse assumenda possimus harum necessitatibus quis fugit. Enim suscipit velit magni consectetur tempora officiis dolor, deserunt illum ullam quas.
        Recusandae facilis optio totam distinctio beatae quo possimus tenetur cumque consectetur quidem, exercitationem, voluptates tempora quae autem molestias placeat officiis saepe! Facere aspernatur iure modi nulla? Suscipit quidem tempore consequuntur!
        Dolorem odit exercitationem adipisci at ducimus sed inventore quibusdam eligendi ratione, debitis fugit architecto fuga voluptas perspiciatis ex minus dolorum a! Cumque placeat impedit, excepturi deleniti ipsam quisquam voluptatibus in.
        Alias, sunt corporis cumque adipisci repudiandae consequatur autem nulla porro incidunt, saepe fugit! Officiis, excepturi. Quos omnis, repellat adipisci perferendis ratione, nobis at aliquid autem beatae nihil reiciendis, aperiam esse!
        Non, voluptatum consequatur. Nam explicabo, sint corporis ipsum modi quaerat voluptatum voluptate labore natus id fuga asperiores itaque quo a, cum aspernatur ratione ipsam. Sequi ipsam perferendis minus illo odio.
        Tenetur aut eum rem ullam debitis porro! Reprehenderit nesciunt nam cupiditate nobis, perferendis aliquam voluptatibus assumenda suscipit harum officia corrupti fuga accusantium cum commodi aut laudantium. Quos blanditiis commodi eligendi.
        Fugit nobis esse, distinctio ab magnam ducimus debitis laboriosam aliquid porro necessitatibus, mollitia beatae, adipisci soluta? Neque tenetur mollitia error. Molestiae placeat eius harum repudiandae excepturi id vitae illo delectus?
        Iure, repellat. Labore quas vitae hic facilis aliquid iste ut, exercitationem culpa? Ratione consectetur exercitationem facilis necessitatibus quos ex quaerat, et dolorum, placeat culpa hic enim quia vero iure ab!
        Nam sed beatae atque quasi quis eius deserunt corrupti officia voluptas quas ex ullam suscipit quo hic cupiditate tempora, at cum placeat excepturi blanditiis sit fugit harum! Beatae, similique ipsam!
        Necessitatibus eius voluptas, earum velit quia aspernatur doloremque consectetur distinctio quibusdam ut, ex dolores maxime itaque voluptates similique. Laboriosam quibusdam repudiandae distinctio ipsa iusto earum exercitationem totam. Hic, modi debitis.
        Consequuntur saepe id minima corporis asperiores, sapiente provident voluptate voluptates earum cum non illo facere nihil magnam quam ipsam, aspernatur enim nulla dolores accusamus laboriosam eum itaque nam pariatur. Ad!
        Aperiam, itaque animi fuga ratione ipsa odit quis unde labore officiis fugiat a saepe quasi beatae velit perferendis accusamus ex. Impedit eaque distinctio ipsam possimus beatae laudantium, eos magni similique!
        Voluptatum laborum sunt, ratione libero earum expedita blanditiis nesciunt provident quos? Illum, corrupti fugit fugiat tempore porro quaerat aspernatur cupiditate nam delectus tenetur dolor soluta, saepe error ut? Dolores, iure!
        Doloribus sed velit neque eveniet repellat ex cum deserunt voluptatibus sit itaque. Id accusamus cupiditate quasi quaerat aspernatur eaque! Eius quis vitae numquam voluptatibus cum dicta nesciunt inventore sint maiores.
        Blanditiis nostrum autem numquam ullam unde ducimus veritatis iure! Error saepe laborum omnis quae velit quas ad, ullam soluta tenetur quis! Natus sit distinctio sunt quidem quaerat temporibus minima similique!
        Dolorem officia distinctio ab ut! Corporis, adipisci excepturi vero quaerat illum commodi repellat hic. Assumenda quis, accusantium architecto amet reprehenderit enim soluta alias, quos libero ab nemo quasi aut harum.
        Id non ratione possimus harum dignissimos? Omnis dolore fuga eaque natus voluptatum optio tempore minima nihil laudantium atque ab dignissimos deleniti vel, totam earum provident, doloribus aut laborum repellendus reprehenderit.
        Rerum itaque inventore dicta molestias deserunt, aut magni eveniet facere facilis optio numquam quidem nam aperiam illo voluptate placeat tempora nostrum possimus cum praesentium saepe? Asperiores at quisquam facilis veritatis!
        Ex a perferendis asperiores libero fugiat neque consequuntur, iste omnis expedita necessitatibus sint at soluta dolorum? Ab, sapiente facilis deleniti distinctio aperiam culpa, itaque tempora tenetur eos delectus minus laudantium.
        Enim fugit fugiat dolor nisi aperiam hic autem iusto maiores, iste earum quam labore eum nemo odit inventore? Neque voluptate distinctio assumenda dolore culpa maiores ex nisi quaerat minus eos!
        Consequuntur repudiandae corrupti numquam iure sit laudantium ut, eligendi ipsum maiores, ullam cumque explicabo dicta veritatis consectetur neque nihil fugiat? Facilis fuga recusandae dignissimos cupiditate ad beatae reprehenderit tenetur est!
        Eligendi consequuntur cum similique voluptates voluptatibus nesciunt sunt voluptas atque hic eius, nemo placeat velit laborum ullam dolores cumque minus! Quo deleniti nostrum aut delectus excepturi iusto quas neque quidem?
        Numquam ea officia fugit velit nihil alias aliquid sed sint, debitis perferendis amet magni dolor dolorem quasi placeat neque minima autem earum libero omnis laborum excepturi culpa. Voluptate, in corrupti?
        Perspiciatis exercitationem quasi eum doloribus amet excepturi ipsum? Numquam id autem cumque repellendus, error ex modi, perferendis molestias dicta facilis nihil, provident ea iusto. Rem veritatis laboriosam adipisci sed repudiandae?
        Eius accusamus eum illum impedit ab nihil. Dolor voluptatum molestiae architecto, quaerat assumenda inventore vel id voluptatem doloremque, fugiat nobis sed, quam exercitationem ab nihil maiores asperiores cum animi libero!
        Officiis ea a sunt, consequatur aperiam quibusdam illo commodi rem suscipit placeat laudantium corrupti libero delectus repellat. Cum quae fuga culpa harum quisquam earum dolores architecto, nulla aperiam laborum odit!
        Necessitatibus, facere quos illum optio cum quidem corporis velit fuga sunt quasi magnam, minima, impedit fugiat? Provident necessitatibus libero magnam voluptas incidunt, dolor alias officia. Corrupti et nihil dignissimos provident.
        Natus reprehenderit libero facere ad ratione aliquid magni exercitationem labore, similique numquam dolorum earum debitis porro alias architecto sed aperiam quaerat. Pariatur dolore provident esse dolorum, officia mollitia adipisci suscipit?
        Lorem ipsum dolor sit amet consectetur adipisicing elit. In possimus pariatur mollitia autem deleniti non. Ut cum hic laborum, repudiandae cumque delectus repellat impedit facere, pariatur, ea non necessitatibus id.
        Hic pariatur recusandae quia et autem sint unde nam ipsum eum. Dicta et consequuntur sint cupiditate, perspiciatis, sequi aperiam qui modi voluptatem nobis accusamus tempore aliquid vitae quibusdam sunt autem!
        Excepturi reiciendis hic quia magnam asperiores aperiam ipsam est corrupti exercitationem quasi quidem eveniet dolores incidunt rerum maxime libero, error iste repellat nam modi, qui, reprehenderit quibusdam adipisci voluptates? Dignissimos?
        Voluptates inventore repellendus, facere ea ex deserunt, commodi voluptatibus nihil reprehenderit sit sequi odit. Eaque ipsum nostrum eveniet hic dicta beatae, quam sunt quae rerum est. Praesentium illo totam nobis?
        Quas, architecto magni! A ab tenetur nulla obcaecati, illo perferendis facilis maxime, eum debitis quae blanditiis doloribus accusantium corporis repudiandae nobis distinctio ullam dolor, quis illum? Iste consectetur accusantium natus.
        At esse itaque sed magni illum neque accusamus voluptas pariatur. Omnis consequatur, nobis perferendis odio, esse nisi delectus qui nostrum excepturi perspiciatis reiciendis vero, iure saepe eius facilis dolorum architecto.
        Laudantium reprehenderit incidunt deserunt fugiat dolores nam minus aliquid eius necessitatibus dolor. Ratione laboriosam doloremque magnam aperiam iure ad dolores exercitationem. Est totam incidunt id quasi vel fugiat, tenetur provident?
        Sint, soluta itaque reprehenderit sapiente dolorem error quia id nulla explicabo blanditiis possimus voluptatibus? Libero temporibus reprehenderit consequuntur repellat quibusdam laboriosam excepturi a reiciendis ad beatae, repellendus iusto omnis quam.
        Ex, commodi eum. Suscipit accusamus facilis ducimus est debitis amet rem repudiandae dignissimos tempore dolorum illo laboriosam impedit inventore accusantium odio, fuga, culpa ut sapiente, excepturi eaque quibusdam ab voluptates!
        Vel sequi rerum quibusdam odio sed voluptatem eveniet pariatur, reiciendis maiores blanditiis, iste, odit dolor quidem! Commodi, facere nostrum omnis adipisci tempore voluptatibus fuga rem suscipit nemo consectetur, eos quibusdam?
        Eum unde delectus optio exercitationem dicta et eligendi id. Illum quibusdam possimus cupiditate sapiente quod temporibus enim nobis eaque porro, autem expedita id ab quia excepturi ullam molestiae. Ipsam, nesciunt!
        Tenetur reprehenderit voluptas deserunt delectus alias vero totam, ea iste pariatur adipisci illum eaque repudiandae nesciunt perferendis consequuntur nulla, perspiciatis rerum enim sunt tempora suscipit harum ducimus! Molestias, sunt? Autem!
        Dolorum nobis consectetur omnis fuga, minus itaque ipsam, velit saepe debitis recusandae illo ab? Tempora ipsum quas maxime ducimus eaque obcaecati? Voluptatem commodi vitae porro at facere nulla ab. Vel.
        Aspernatur, excepturi quasi impedit nam quae natus quibusdam ut modi? Animi corporis, ipsa autem in veniam modi, doloribus molestias blanditiis nulla vitae natus itaque labore et aspernatur sint minus architecto!
        Ut, facilis voluptates explicabo possimus tenetur voluptatem saepe dolorem quae asperiores, esse maiores doloribus sint aspernatur ipsum enim nostrum ipsa nulla pariatur perferendis sit quos deserunt voluptatibus? Laborum, a porro?
        Aspernatur quibusdam placeat sit voluptatem dolores libero quos quidem earum corrupti, vitae, architecto adipisci eius inventore aut! Quibusdam enim praesentium soluta quasi numquam, excepturi, velit nihil eius minima fugiat recusandae.
        Nemo aut modi ullam vero dignissimos eligendi minima porro iusto nostrum laboriosam. Numquam error corrupti, in, aspernatur voluptas omnis repudiandae corporis officiis ad tenetur praesentium molestias harum dignissimos laboriosam quas.
        Aspernatur doloremque iste quos, cumque laudantium adipisci, totam tempore sit odio voluptates fuga omnis inventore aliquam illo magni iusto ullam harum! Necessitatibus fuga dignissimos cumque, saepe nihil maiores reiciendis nostrum.
        Fugiat minus ad nisi libero perferendis dolorum dignissimos eaque odit accusamus beatae adipisci id placeat sed natus vel, iusto, voluptates cumque, doloremque dicta quibusdam? Accusamus possimus assumenda quas quo nostrum.
        Ratione id cumque sunt quod, sequi vitae culpa harum excepturi dolorum a natus perspiciatis quasi blanditiis doloribus, nam dolores dolor ipsa facilis nihil amet animi. Quam, velit. Itaque, quos dolorum?
    </main>
</body>
</html>