<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;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.