CodePen Embed - OGgbmJ

  <html>

<head>
<title>Без названия</title>
</head>
    <section>
  <nav>nav</nav>
  <header>header</header>
  <main> 
    <aside>text text img more text, more and more ... text text img more text, more and more ... text text img more text, more and more ... text text img more text, more and more ... text text img more text, more and more ... text text img more text, more and more ... text text img more text, more and more ... text text img more text, more and more ... text text img more text, more and more ... text text img more text, more and more ... text text img more text, more and more ... text text img more text, more and more ... text text img more text, more and more ... text text img more text, more and more ... text text img more text, more and more ... text text img more text, more and more ... text text img more text, more and more ... text text img more text, more and more ... text text img more text, more and more ... text text img more text, more and more ... text text img more text, more and more ... text text img more text, more and more ... text text img more text, more and more ... text text img more text, more and more ... text text img more text, more and more ... text text img more text, more and more ... text text img more text, more and more ... text text img more text, more and more ... text text img more text, more and more ... text text img more text, more and more ... text text img more text, more and more ... text text img more text, more and more ... text text img more text, more and more ... text text img more text, more and more ... text text img more text, more and more ... text text img more text, more and more ... text text img more text, more and more ... text text img more text, more and more ... text text img more text, more and more ... text text img more text, more and more ... text text img more text, more and more ... text text img more text, more and more ... text text img more text, more and more ... text text img more text, more and more ... text text img more text, more and more ... text text img more text, more and more ... text text img more text, more and more ... text text img more text, more and more ... text text img more text, more and more ... text text img more text, more and more ... text text img more text, more and more ... text text img more text, more and more ... text text img more text, more and more ... text text img more text, more and more ... text text img more text, more and more ... text text img more text, more and more ... text text img more text, more and more ... text text img more text, more and more ... text text img more text, more and more ... text text img more text, more and more ... text text img more text, more and more ... text text img more text, more and more ... text text img more text, more and more ... text text img more text, more and more ... text text img more text, more and more ... text text img more text, more and more ... text text img more text, more and more ... text text img more text, more and more ... text text img more text, more and more ... text text img more text, more and more ... text text img more text, more and more ... text text img more text, more and more ... text text img more text, more and more ... text text img more text, more and more ... text text img more text, more and more ... text text img more text, more and more ... text text img more text, more and more ... text text img more text, more and more ... text text img more text, more and more ... text text img more text, more and more ... text text img more text, more and more ... text text img more text, more and more ... text text img more text, more and more ... text text img more text, more and more ... text text img more text, more and more ... text text img more text, more and more ... text text img more text, more and more ... text text img more text, more and more ... text text img more text, more and more ... text text img more text, more and more ... text text img more text, more and more ... text text img more text, more and more ... text text img more text, more and more ... text text img more text, more and more
    </aside>
    
    </main>
  <footer>footer</footer>
    
  </section>

html {
  display: flex;
  min-height: 100vh;
  min-width: 100vw;
  margin: 0;
  background-color: lightgray;
  
     background-image: url("https://i.pinimg.com/originals/b0/db/df/b0dbdf89d982be43bbbb33cb3c7e1a8d.png"); 
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}


body {
  height: 80vh;
  width: 80vw;
  min-height: 600px;
  min-width: 400px;
  margin: auto;
  background-color: coral; 
}

section{
    position: relative;
    width: 100%;
    height: 100%;
  display:table;
}

nav {
  position: absolute;
  right:0;
  background-color:blue;
  height: 100%;
  width: 50px;
  opacity: 0.7;
}

header{
  background-color:green;
  width: 100%;
  height: 50px;
  opacity: 0.7;
}

main{
  margin-right:65px;
  margin-bottom:65px;
  position: relative;
  overflow-x: auto;
  direction: rtl;
    overflow:auto;
  height: calc(100% - 100px);
  border-radius:8px;
}

main > aside{
direction:ltr;
  margin-left:15px;
  margin-top:10px;
}

footer{
  background-color:red;
  width: 100%;
  position: absolute;
  bottom:0;
  height: 50px;
  opacity: 0.7;
}

This Pen is owned by mtNATS on CodePen.

See more by @Dimastik86 on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.