<header></header>
<div class="wrapper">
<aside></aside>
<main class="content">
<div class="container">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Excepturi sequi dolore impedit officiis possimus asperiores soluta beatae mollitia. Earum temporibus qui expedita pariatur officia suscipit voluptatum quam repellendus sed magni.
Explicabo ut reprehenderit optio ipsum aperiam libero. Ut laborum, voluptas quibusdam aliquid saepe rerum fugiat quod placeat repellendus error repudiandae qui modi iste dolor vel reprehenderit quidem accusantium quasi deserunt.
Consequatur eius unde laudantium facilis magnam veniam blanditiis nulla vel necessitatibus itaque ipsam fugiat ex maiores nostrum quia, rem, perspiciatis molestiae aliquid tempora deleniti enim provident inventore earum beatae? Facilis?
Harum animi quae laboriosam labore deleniti placeat ducimus quos iusto debitis quidem nam ad alias dolorum obcaecati praesentium adipisci ratione delectus expedita, et, est recusandae ab. Deserunt minima quidem quas?
</div>
</main>
</div>
* {
box-sizing: border-box;
}
body {
min-height: 100vh;
}
header {
height: 60px;
background: #7de3d7;
}
.wrapper {
min-height: calc(100vh - 60px);
display: flex;
}
aside {
min-height: calc(100vh - 60px);
width: 200px;
background: #d8edea;
}
.content {
min-height: calc(100vh - 60px);
width: 100%;
padding: 20px;
}
.container {
max-width: 1200px;
width: 100%;
padding: 0 25px;
margin: 0 auto;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.