jackielii/appbar-without-fixed-positioning.html

## appbar-without-fixed-positioning.html
<!doctype html>

<html lang="en">
<head>
  <style type="text/css">
    .app {
      display: flex;
      flex-direction: column;
      height: 100vh;
      /* the height can be anything: e.g. 100% of parent */
    }

    .content {
      overflow-y: auto;
    }

    /* optional: make it look better */
    html * {
      margin: 0;
    }

    body *:not(.app) {
      padding: 1rem;
    }

    .appbar {
      background-color: indigo;
      color: white;
      padding: 1rem;
    }
  </style>
</head>

<body>
  <article class="app">
    <header class="appbar">home | about | faq</header>
    <section class="content">
      <p>hello</p>
      <p>world</p>
      <p>hello</p>
      <p>world</p>
      <p>hello</p>
      <p>world</p>
      <p>hello</p>
      <p>world</p>
      <p>hello</p>
      <p>world</p>
      <p>hello</p>
      <p>world</p>
      <p>hello</p>
      <p>world</p>
      <p>hello</p>
      <p>world</p>
    </section>
  </article>
</body>
</html>
	<!doctype html>

	<html lang="en">
	<head>
	<style type="text/css">
	.app {
	display: flex;
	flex-direction: column;
	height: 100vh;
	/* the height can be anything: e.g. 100% of parent */
	}

	.content {
	overflow-y: auto;
	}

	/* optional: make it look better */
	html * {
	margin: 0;
	}

	body *:not(.app) {
	padding: 1rem;
	}

	.appbar {
	background-color: indigo;
	color: white;
	padding: 1rem;
	}
	</style>
	</head>

	<body>
	<article class="app">
	<header class="appbar">home \| about \| faq</header>
	<section class="content">
	<p>hello</p>
	<p>world</p>
	<p>hello</p>
	<p>world</p>
	<p>hello</p>
	<p>world</p>
	<p>hello</p>
	<p>world</p>
	<p>hello</p>
	<p>world</p>
	<p>hello</p>
	<p>world</p>
	<p>hello</p>
	<p>world</p>
	<p>hello</p>
	<p>world</p>
	</section>
	</article>
	</body>
	</html>