<header class="banner"></header>
<div class="container">
  <main></main>
  <aside></aside>
</div>
<footer class="footer"></footer>
body{
  margin: 0;
}
header, footer{
  width: 90vw;
  height: 80vh;
  margin: 0 auto;
  background: yellow;
}
div.container{
  width: 90vw;
  height: 200vh;
  margin: 2rem auto;
  display: flex;
  flex-direction: row
}
div.container main{
  flex: 1;
  height: 100%;
  margin-right: 2rem;
  background: blue
}
div.container aside{
  flex: 0.3;
  height: 60vh;
  background: red;
  position: sticky;
  top: 2rem;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.