Page 158 - CSS

very simple markup:

HTML Markup:

<div class="container">
<header class="header">Header</header>
<div class="content-body">
<main class="content">Content</main>
<nav class="sidenav">Nav</nav>
<aside class="ads">Ads</aside>
</div>
<footer class="footer">Footer</footer>
</div>

CSS:

body {
margin: 0;
padding: 0;
}

.container {
display: flex;
flex-direction: column;
height: 100vh;
}

.header {
flex: 0 0 50px;
}

.content-body {
flex: 1 1 auto;

display: flex;
flex-direction: row;
}

.content-body .content {
flex: 1 1 auto;
overflow: auto;
}

.content-body .sidenav {
order: -1;
flex: 0 0 100px;
overflow: auto;
}

.content-body .ads {
flex: 0 0 100px;
overflow: auto;
}

.footer {
flex: 0 0 50px;
}

https://riptutorial.com/ 136