zhentian-wan/index.html

## index.html
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>GistRun</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
    <nav>
      nav
    </nav>
    <main>
      main
    </main>
    <aside>
      aside
    </aside>
  <script src="script.js"></script>
</body>
</html>

## script.js
console.log('Hello World!');

## styles.css

nav{
  background: yellow;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 5rem;
}

main{
  background: red;
  width: calc(100% - 25rem);
  margin-left: 5rem;
}

aside{
  background: blue;
  width:  20rem;
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
}

@media (max-width: 600px){
  aside{
    width: 8rem;
  }
  nav{
    width: 3rem;
  }
  main{
    width: calc(100%-11rem);
  }
}
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>GistRun</title>
	<link rel="stylesheet" href="styles.css">
	</head>
	<body>
	<nav>
	nav
	</nav>
	<main>
	main
	</main>
	<aside>
	aside
	</aside>
	<script src="script.js"></script>
	</body>
	</html>

	nav{
	background: yellow;
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 5rem;
	}

	main{
	background: red;
	width: calc(100% - 25rem);
	margin-left: 5rem;
	}

	aside{
	background: blue;
	width: 20rem;
	position: fixed;
	top: 0;
	right: 0;
	height: 100%;
	}

	@media (max-width: 600px){
	aside{
	width: 8rem;
	}
	nav{
	width: 3rem;
	}
	main{
	width: calc(100%-11rem);
	}
	}