<header class="header"><h1>Header</h2></header>
<nav>Nav stuff or whatever</nav>
<main class="main">
  <h2>Scrollable section</h2>
      <p>Content to scroll</p>
      <p>Content to scroll</p>
      <p>Content to scroll</p>
      <p>Content to scroll</p>
      <p>Content to scroll</p>
      <p>Content to scroll</p>
      <p>Content to scroll</p>
      <p>Content to scroll</p>
      <p>Content to scroll</p>
      <p>Content to scroll</p>
      <p>Content to scroll</p>
      <p>Content to scroll</p>
      <p>Content to scroll</p>
      <p>Content to scroll</p>
      <p>Content to scroll</p>
      <p>Content to scroll</p>
      <p>Content to scroll</p>
      <p>Content to scroll</p>
      <p>Content to scroll</p>
      <p>Content to scroll</p>
      <p>Content to scroll</p>
      <p>Content to scroll</p>
      <p>Content to scroll</p>
      <p>Content to scroll</p>
      <p>Content to scroll</p>
      <p>Content to scroll</p>
      <p>Content to scroll</p>
      <p>Content to scroll</p>
      <p>Content to scroll</p>
</main>
<footer>Footer</footer>

html {
  box-sizing: border-box;
  background:#666;
}
*, *:before, *:after {
  box-sizing: inherit;
}
html, body {
	margin:0;
	padding:0
}
body{
	display: flex;
	height: 100vh;
	flex-direction: column;
  max-width:1280px;
  margin:auto;
}
.main {
	flex: 1;
  overflow:auto;
  background:#ccc;
 	padding:10px;
}
header,footer,nav {
	background:green;
	padding:10px;
}
nav{background:red;}