<div class="page">
  <header class="box">header</header>
  
  <div class="layout">
    <main>
      <p>
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed elit dui, pellentesque a, faucibus vel, interdum nec, diam. Maecenas lorem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Integer in sapien. Aenean id metus id velit ullamcorper pulvinar. Morbi scelerisque luctus velit. Fusce tellus odio, dapibus id fermentum quis, suscipit id erat. Nullam at arcu a est sollicitudin euismod. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Curabitur ligula sapien, pulvinar a vestibulum quis, facilisis vel sapien. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris dictum facilisis augue. In sem justo, commodo ut, suscipit at, pharetra vitae, orci. Mauris tincidunt sem sed arcu. In enim a arcu imperdiet malesuada. Quisque porta.
      </p>
<p>
Integer vulputate sem a nibh rutrum consequat. Aenean id metus id velit ullamcorper pulvinar. Fusce aliquam vestibulum ipsum. Fusce nibh. Vivamus ac leo pretium faucibus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla accumsan, elit sit amet varius semper, nulla mauris mollis quam, tempor suscipit diam nulla vel leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce tellus. Duis condimentum augue id magna semper rutrum. Etiam neque. Pellentesque pretium lectus id turpis. Sed elit dui, pellentesque a, faucibus vel, interdum nec, diam. Etiam quis quam. Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? Mauris metus.
</p>
<p>
Duis condimentum augue id magna semper rutrum. Duis pulvinar. Nulla quis diam. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. Etiam ligula pede, sagittis quis, interdum ultricies, scelerisque eu. Etiam dui sem, fermentum vitae, sagittis id, malesuada in, quam. Etiam quis quam. Donec iaculis gravida nulla. Etiam sapien elit, consequat eget, tristique non, venenatis quis, ante. Aenean vel massa quis mauris vehicula lacinia.
</p>
<p>
Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? Nullam faucibus mi quis velit. Duis condimentum augue id magna semper rutrum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Fusce wisi. Nulla pulvinar eleifend sem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque tincidunt scelerisque libero. Cras elementum. Etiam ligula pede, sagittis quis, interdum ultricies, scelerisque eu. Fusce consectetuer risus a nunc. Aliquam erat volutpat. Sed vel lectus. Donec odio tempus molestie, porttitor ut, iaculis quis, sem. Aliquam erat volutpat. Mauris elementum mauris vitae tortor. Vestibulum fermentum tortor id mi. Vestibulum erat nulla, ullamcorper nec, rutrum non, nonummy ac, erat.
</p>
<p>
Nullam faucibus mi quis velit. Aliquam erat volutpat. Duis risus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec ipsum massa, ullamcorper in, auctor et, scelerisque sed, est. Donec iaculis gravida nulla. Integer imperdiet lectus quis justo. Nullam feugiat, turpis at pulvinar vulputate, erat libero tristique tellus, nec bibendum odio risus sit amet ante. Cras elementum. Quisque tincidunt scelerisque libero. Phasellus rhoncus.
</p>
    </main>
    <aside class="box">aside</aside>
  </div>
  
  <footer class="box">footer</footer>
</div>
/* jednoduchý reset */
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/* pár stylů aby to dobře vypadalo */
.box{
  padding: 20px;
  font-size: 30px;
}

.page{
  padding: 0 30px;
}

.layout{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

/* position: sticky magic */
header{
  margin-bottom: 30px;
  
  position: sticky;
  top: 0;
  z-index: 50;
  
  background: red;
  color: white;
}

main{
  width: 72%;
  padding: 20px;
  
  background: #f0f0f0;
}

aside{
  width: 25%;
  
  position: sticky;
  top: 90px;/*velikost hlavicky a mezera*/
  
  background: green;
  color: white;
}

footer{
  min-height: 1000px;
  margin-top: 30px;
  
  background: orange;
  color: white;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.