<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0
}
ul {
list-style: none;
}
/* body {
background: url('bg.jpg') no-repeat 0 0/100%;
} */
.clearfix::after {
content: '';
display: block;
clear: both
}
.container {
position: fixed;
width: 100%;
height: 100%;
}
header {
height: 60px;
background-color: antiquewhite;
position: absolute;
top: 0;
left: 0;
right: 0
}
.main {
padding: 60px 10px;
}
.left {
float: left;
width: 250px;
height: 100%;
margin-right: 10px;
}
article {
overflow: hidden;
height: 100%;
}
</style>
</head>
<body>
<div class="container">
<header>
<h2>这是一个后台管理系统</h2>
</header>
<div class="main clearfix">
<aside class="left">Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore nam facere aliquam maiores
sunt expedita odio hic adipisci. Quaerat accusamus autem ratione! Doloribus voluptatem magnam quia praesentium
mollitia molestias aliquam. Aspernatur distinctio voluptas reiciendis dicta non voluptatibus aliquam alias
cupiditate fugit ad est repellat ipsam incidunt sed id fugiat corporis ea necessitatibus amet, labore hic. Iure,
dicta ad deleniti, error, sunt ea iste excepturi voluptatum numquam ipsa mollitia facere itaque. Quasi incidunt
qui autem. Dolorem, ea dolore? Perspiciatis quia minus, beatae sequi, alias repellendus dolorum magnam at
doloribus labore nemo, tempora aperiam voluptates! Delectus et consectetur voluptatem voluptas, iusto quasi?
</aside>
<article>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa impedit hic, voluptate quidem dicta itaque
quasi illum eveniet ea quam delectus mollitia dolor nobis libero sunt? Quisquam maxime eveniet eaque voluptas!
Error quam optio non libero fugiat, quia perspiciatis sint consequatur, modi deserunt unde similique possimus
provident? Ab hic, molestias velit facere corporis quod? Pariatur beatae impedit, dolor repellendus
necessitatibus quae nobis? Earum sunt cupiditate corporis maxime eum, inventore quas mollitia rerum unde quis
sit quasi nostrum! Maxime libero quis, sed, labore quod mollitia architecto aut magni, repellendus odit
consequatur numquam perferendis iste doloremque id cumque autem explicabo deserunt laborum aperiam aliquid
exercitationem voluptatum. Architecto blanditiis rem numquam dolore reprehenderit debitis facilis dolor possimus
voluptas odio saepe rerum sint deserunt voluptates, quas recusandae distinctio voluptatem quis. Et expedita
temporibus vel assumenda, eaque neque tempora facere recusandae nobis quis itaque eius iste quasi natus omnis
consequuntur quisquam, ab repellat laboriosam explicabo, veritatis beatae eos ad odio. Incidunt, dolorem dicta
illum excepturi voluptate debitis ut libero. Autem consequatur architecto, quidem placeat deserunt cum provident
magnam amet neque ratione odio eligendi fugiat nulla voluptatem. Temporibus, tenetur obcaecati iusto non
similique amet! Doloremque, soluta voluptatem explicabo modi facere molestiae non alias delectus quod excepturi
illum doloribus minima temporibus voluptas quo dicta accusamus mollitia minus perspiciatis! Fuga harum ratione
corrupti laborum temporibus provident iusto accusamus ab, quis eaque incidunt veritatis laudantium excepturi
facilis cupiditate est dignissimos, dolorem tenetur ea repellendus necessitatibus voluptatum, voluptates
consectetur sit. Quod veritatis incidunt animi in, commodi praesentium corporis adipisci officia, iusto
repellendus, eos reprehenderit maiores excepturi! Similique, nobis! Magnam provident reiciendis ab voluptas
dignissimos sunt voluptate soluta numquam beatae rem fuga, architecto corporis incidunt est ratione quibusdam
possimus repellat consectetur repudiandae fugiat commodi totam! Culpa atque minus fugiat inventore in aliquam,
non nobis at reprehenderit vitae dolore eligendi, corporis molestiae!</article>
</div>
</div>
</body>
</html>
