Giters

cichy380 / sticky-header

Header above scrollable content

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Sticky header

Pin a flexible-height header to the top of the viewport in desktop browsers above the scrollable content.

CSS

html,
body {
  height: 100%;
  margin: 0;
}
.wrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.content {
  flex: 1;
  overflow: auto;
}

HTML

<!doctype html>
<html><!-- 100% height -->
    <head>
        <!-- ... -->
    </head>
    <body><!-- 100% height -->
        <div class="wrapper">
            <header>Sticky Header</header>
            <main class="content">
                Content with Lorem ipsum dolor...
            </main>
        </div>
    <body>
</html>

Live preview: https://jsfiddle.net/cichy380/aq95g38k/

About

Header above scrollable content