<header class="header">Header</header>
<main class="main">
      <p>First Line</p>
      <p>^ Just so you know it's not hidden behind the header.</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>

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
html, body {
	margin:0;
	padding:0
}

header {
	background:green;
	padding:10px;
  position: sticky;
  top: 0;
}
main {
  padding: 0.5em 2em;
}