<!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>
::-webkit-scrollbar {
width: 5px;
height: 5px;
}
::-webkit-scrollbar-thumb {
background: #d2d2d2;
border-radius: 5px;
}
::-webkit-scrollbar-track {
background: var(--bg-color);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
height: 100%;
}
.container {
height: 100%;
min-width: 1000px;
display: flex;
flex-direction: column;
border: 5px solid;
}
.container .header {
height: 60px;
background-color: skyblue;
}
.container .main {
flex: 1;
background-color: #f3f3f3;
display: flex;
}
.container .main .aside {
background-color: #f40;
width: 300px;
display: flex;
flex-direction: column;
}
.container .main .aside .tabs {
height: 40px;
background-color: yellowgreen;
}
.container .main .aside .list {
background-color: #f40;
width: 300px;
flex: 1;
position: relative;
}
.container .main .aside .list .wrapper,
.container .main .content .wrapper {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow-y: auto;
padding: 10px;
}
.container .main .content {
flex: 1;
background-color: pink;
position: relative;
}
.container .footer {
height: 40px;
background-color: #008c8c;
}
</style>
</head>
<body>
<div class="container">
<header class="header"></header>
<div class="main">
<aside class="aside">
<div class="tabs"></div>
<div class="list">
<div class="wrapper">
<ul>
<li>Lorem ipsum dolor sit amet.</li>
<li>Similique repellat quidem expedita porro?</li>
<li>Ea quidem magnam accusantium libero.</li>
<li>Reiciendis quibusdam aliquam enim veniam!</li>
<li>Deserunt expedita illum labore ratione!</li>
<li>Unde reprehenderit eveniet nemo a.</li>
<li>Atque minima amet optio delectus.</li>
<li>Eligendi, tenetur. Minus, error consequatur.</li>
<li>Maxime ad in officia labore.</li>
<li>Distinctio praesentium esse accusamus numquam!</li>
<li>Labore quae neque inventore itaque.</li>
<li>Corrupti repellendus cumque officiis dolorum.</li>
<li>Sit nobis soluta culpa sed.</li>
<li>Rem libero provident ipsam nam!</li>
<li>Itaque corporis officiis qui quod!</li>
<li>Minima eum id ipsa natus.</li>
<li>Praesentium nisi sunt repudiandae minus.</li>
<li>Beatae reprehenderit earum vero rem.</li>
<li>Vel quos pariatur libero saepe.</li>
<li>Labore sed quaerat laudantium doloribus.</li>
<li>Fugit in fuga sequi porro.</li>
<li>Iure perspiciatis minima autem provident!</li>
<li>Atque excepturi sed distinctio totam.</li>
<li>Voluptate beatae doloremque quaerat necessitatibus!</li>
<li>Quae magni ut deserunt quasi.</li>
<li>Praesentium possimus est veritatis minima!</li>
<li>Quaerat odio numquam amet unde.</li>
<li>Veniam eius dolor non fugiat?</li>
<li>Libero fugit quasi omnis saepe!</li>
<li>Nulla, amet tempore. Unde, explicabo.</li>
<li>Exercitationem nostrum pariatur quidem eius!</li>
<li>Vitae nulla nesciunt iure beatae.</li>
<li>Quos fuga doloremque suscipit omnis!</li>
<li>Quod distinctio porro modi? Harum?</li>
<li>Necessitatibus sunt esse perferendis aliquam?</li>
<li>Eveniet nemo laudantium totam atque?</li>
<li>Nam ratione ducimus non magni.</li>
<li>Eligendi aliquid quae dicta repellendus?</li>
<li>Impedit minus beatae obcaecati et.</li>
<li>Repellat dignissimos neque dolore cum?</li>
<li>Dolor aperiam quidem laborum ad.</li>
<li>Error voluptate suscipit ipsum labore!</li>
<li>Inventore recusandae aliquam aut a!</li>
<li>Minima provident blanditiis cupiditate reprehenderit.</li>
<li>Omnis blanditiis totam quasi nisi.</li>
<li>Cumque distinctio inventore saepe sit.</li>
<li>Nemo natus earum eveniet quod.</li>
<li>Possimus pariatur laborum quaerat nobis.</li>
<li>Quisquam voluptate soluta facilis tempora?</li>
<li>Odio fugiat consequatur quas in!</li>
<li>Fugiat eaque quae totam dolorem?</li>
<li>Sint, nam aspernatur. Ipsam, recusandae.</li>
<li>Tenetur laudantium nostrum rerum quod!</li>
<li>Sunt mollitia cumque blanditiis velit.</li>
<li>Eius alias minima soluta nam.</li>
<li>Sint, voluptatum perspiciatis! Tempora, repellat.</li>
<li>Esse nesciunt earum quasi facere!</li>
<li>Veniam possimus reiciendis eum impedit?</li>
<li>Praesentium earum autem adipisci ea?</li>
<li>Distinctio omnis possimus laborum consequatur?</li>
<li>Est alias dolore tempore temporibus.</li>
<li>Ullam porro libero accusantium perspiciatis.</li>
<li>Facere provident itaque exercitationem. Totam?</li>
<li>Asperiores enim quos blanditiis ab.</li>
<li>Impedit modi praesentium consequatur fugit?</li>
<li>Sint quos impedit cupiditate fugiat.</li>
<li>Modi ex numquam quibusdam magni!</li>
<li>Cupiditate laudantium in libero repudiandae.</li>
<li>Ea ut unde doloribus cumque.</li>
<li>Veniam blanditiis non veritatis cum!</li>
<li>Adipisci, ab! Accusamus, voluptatem praesentium?</li>
<li>Assumenda modi iste numquam praesentium!</li>
<li>Dolore qui officiis quis impedit.</li>
<li>Pariatur maiores voluptas itaque cum?</li>
<li>Fuga eveniet sed enim ipsam!</li>
<li>Quaerat nam minus odio ut.</li>
<li>Cum est laborum facilis ad!</li>
<li>Quia, laborum. Possimus, ab suscipit.</li>
<li>Unde accusantium perspiciatis asperiores dignissimos.</li>
<li>Eaque ipsa neque quam reprehenderit.</li>
<li>Earum itaque esse autem laborum!</li>
<li>Illum hic saepe error similique.</li>
<li>Dignissimos nostrum quae delectus porro.</li>
<li>Quod officiis ab reiciendis maiores?</li>
<li>Modi quaerat repellat iste tenetur.</li>
<li>Consectetur odio quia recusandae esse.</li>
<li>Aliquid tenetur aut illo vel!</li>
<li>Officiis ab doloribus quaerat mollitia?</li>
<li>Pariatur magnam deserunt nihil voluptas.</li>
<li>Recusandae, dicta! Asperiores, et voluptatibus?</li>
<li>Ad officiis sequi quidem exercitationem?</li>
<li>Nostrum numquam voluptatem dolorem doloribus.</li>
<li>Ea expedita veniam numquam incidunt?</li>
<li>Deserunt exercitationem quisquam atque corrupti.</li>
<li>Vel animi ducimus rerum vero.</li>
<li>Odio voluptatibus assumenda ducimus qui!</li>
<li>Minima tempore perspiciatis tenetur autem!</li>
<li>Vero cupiditate odit impedit corporis!</li>
<li>Impedit mollitia totam ut dolores.</li>
<li>Praesentium maiores at laboriosam facilis?</li>
</ul>
</div>
</div>
</aside>
<div class="content">
<div class="wrapper">
<ul>
<li>Lorem ipsum dolor sit amet.</li>
<li>Soluta minus deserunt quo architecto!</li>
<li>Magnam aliquam quas officia unde.</li>
<li>Officia provident cupiditate aspernatur totam?</li>
<li>Harum, facere! Fuga, beatae repudiandae.</li>
<li>Illum consequuntur cupiditate eius assumenda.</li>
<li>Dolore optio cumque soluta tempora.</li>
<li>Totam voluptate praesentium dicta cupiditate.</li>
<li>Libero inventore quibusdam alias odit.</li>
<li>Tempore id harum enim aut.</li>
<li>Quibusdam, beatae! Velit, iste nesciunt.</li>
<li>Minus pariatur quam repellat id?</li>
<li>Harum, laudantium voluptatum. Maiores, modi.</li>
<li>Ipsam nisi quod hic reprehenderit.</li>
<li>Laudantium commodi exercitationem debitis error.</li>
<li>Porro quis molestias sunt impedit.</li>
<li>Nobis quis cupiditate quos necessitatibus.</li>
<li>Voluptates incidunt molestiae similique facere.</li>
<li>In facilis veritatis ipsum voluptatibus.</li>
<li>Quibusdam maxime aperiam ipsa velit.</li>
<li>Architecto doloremque voluptatem repellat sit?</li>
<li>Sequi nulla facilis nesciunt aspernatur.</li>
<li>Dolores harum beatae nobis fugit!</li>
<li>Veniam, ex assumenda! Tenetur, cupiditate?</li>
<li>Enim excepturi facilis nulla aut!</li>
<li>Ab repudiandae sequi veniam unde.</li>
<li>Ducimus iste voluptatum illum magnam?</li>
<li>At expedita repellat numquam error.</li>
<li>Nam ullam repellendus doloribus commodi.</li>
<li>Rem quidem dignissimos tenetur iste!</li>
<li>Ex suscipit laudantium quis? Minus!</li>
<li>Quaerat temporibus illo deleniti natus.</li>
<li>In repellat debitis ducimus nihil?</li>
<li>Dignissimos ipsum cum ipsa id?</li>
<li>Inventore sint nesciunt ipsum quas.</li>
<li>Quam sit alias minus unde.</li>
<li>Inventore aliquam molestiae veniam veritatis.</li>
<li>Earum dignissimos iusto quasi non.</li>
<li>Commodi veniam quod necessitatibus hic.</li>
<li>Quo ea consequatur quia eum.</li>
<li>Quaerat nesciunt repellat odit officia!</li>
<li>Sit veniam excepturi obcaecati reprehenderit!</li>
<li>Animi repellat et quas accusantium.</li>
<li>Fuga fugit nihil temporibus facilis.</li>
<li>Tempora ullam dolor nisi. Enim.</li>
<li>Maxime quod repellat perferendis? Corrupti.</li>
<li>Nam earum facere temporibus optio.</li>
<li>Quasi fuga iste non aliquam!</li>
<li>Eligendi, quas. Accusantium, excepturi at?</li>
<li>Soluta maiores reiciendis aliquid iure?</li>
<li>Consequatur iure maiores veniam provident!</li>
<li>Debitis a laborum consectetur velit?</li>
<li>Possimus architecto facere dolorum porro?</li>
<li>Aperiam doloribus harum qui veritatis.</li>
<li>Dignissimos possimus libero nostrum sapiente.</li>
<li>Quos voluptatem repellendus neque molestias!</li>
<li>Laborum numquam aliquam quas voluptate!</li>
<li>Ipsum repellendus iste sapiente accusamus?</li>
<li>Quo omnis possimus earum nesciunt.</li>
<li>Recusandae harum aliquid error deleniti.</li>
<li>Cum deserunt amet quaerat qui?</li>
<li>Blanditiis commodi delectus eaque accusamus.</li>
<li>Sint illum earum nam necessitatibus?</li>
<li>Tempora sapiente corporis consequuntur dolorum?</li>
<li>Alias omnis aspernatur pariatur ad.</li>
<li>Exercitationem fugit quibusdam beatae nisi!</li>
<li>Ducimus dolor incidunt doloremque maiores.</li>
<li>Illum tenetur perferendis a placeat!</li>
<li>Quas totam officia voluptate nesciunt.</li>
<li>Quo necessitatibus cum animi perferendis!</li>
<li>Corrupti alias excepturi magni praesentium?</li>
<li>At dolor vel harum ab?</li>
<li>Voluptatem repellendus iure ducimus! Cupiditate.</li>
<li>Debitis voluptatem laboriosam officiis illo?</li>
<li>Velit sapiente amet sed dolorum.</li>
<li>Nobis iure aut eveniet natus?</li>
<li>Quod sequi nemo error accusantium.</li>
<li>Modi quis voluptates molestias. Ipsam?</li>
<li>Iusto incidunt dolor voluptatem molestiae?</li>
<li>Nobis, animi nisi! Deserunt, id?</li>
<li>Voluptatum temporibus aliquam inventore tempore?</li>
<li>Consectetur voluptas sed itaque quo.</li>
<li>Voluptates est esse quae molestiae.</li>
<li>Deserunt animi molestias sunt dicta.</li>
<li>Adipisci placeat corporis fugiat quisquam?</li>
<li>Perspiciatis eveniet minima unde? Sapiente.</li>
<li>Aliquam asperiores tenetur dolore a.</li>
<li>At perferendis sunt dicta optio.</li>
<li>Molestiae nesciunt quam natus fugiat?</li>
<li>Minus impedit distinctio error sapiente!</li>
<li>Tempora rem aut nulla dolor!</li>
<li>Autem tempora reiciendis eveniet eius.</li>
<li>Sint expedita ut dolorum fugiat?</li>
<li>Placeat dicta eveniet voluptatum corrupti.</li>
<li>Aliquam nesciunt nemo maiores neque.</li>
<li>Itaque sequi velit at cumque.</li>
<li>Iste nesciunt omnis eveniet recusandae?</li>
<li>Quas eum consequuntur omnis. Adipisci?</li>
<li>Iste ullam dolore tenetur officiis!</li>
<li>Eligendi vel commodi repellat veniam.</li>
</ul>
</div>
</div>
</div>
<footer class="footer"></footer>
</div>
</body>
</html>
