position sticky top and bottom page layout?

Question

Is there a way to update this gist such that the <nav> element sticks to bottom:16px until the <footer> pushes it up when the user scrolls to the bottom of the page?

I'm trying to find a way to keep the bottom of the <nav> element 16px from the top of the footer (or the bottom of the viewport when the footer is scrolled outside the viewport). In other words, I want the bottom of the nav element and footer to behave just like the top of the nav element and the header are behaving in my gist.

The max-height: calc(100vh - 50px - 16px - 16px); in my gist is just a workaround. Really the max-height depends on whether the header and/or footer are in the viewport.

Here's a screenshot that shows what I'm attempting to fix:

nav issue

The current behavior of the top of the <nav> element should be preserved. It is 16px from the top of the <header> (or the top of the viewport when the header is outside the viewport).

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}

.page-header, .page-footer {
  height: 50px;
  background-color: #ccc;
}

.page-layout {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin: 16px 0;
}

.page-layout-nav, .page-layout-main, .page-layout-aside {
  border: 1px dotted;
}

.page-layout-nav {
  order: 0;
  width: calc(25% - 16px);
}

.page-layout-main {
  order: 1;
  width: 50%;
}

.page-layout-aside {
  order: 2;
  width: calc(25% - 16px);
}

.page-layout-nav, .page-layout-aside {
  position: sticky;
  top: 16px;
  bottom: 16px;
  overflow: auto;
  max-height: calc(100vh - 50px - 16px - 16px); /* not quite right... */
}

<header class="page-header">
  Contoso
</header>
<div class="page-layout">
  <main class="page-layout-main">
    <h1>Hello World</h1>
    <p>lorem ipsum sumit dolar.  lorem ipsum sumit dolar.  lorem ipsum sumit dolar.  lorem ipsum sumit dolar.  lorem ipsum sumit dolar.  lorem ipsum sumit dolar.  lorem ipsum sumit dolar.  lorem ipsum sumit dolar.  lorem ipsum sumit dolar.  lorem ipsum sumit dolar.  lorem ipsum sumit dolar.  </p>
    <h2>Foo</h2>
    <p>lorem ipsum sumit dolar.  lorem ipsum sumit dolar.  lorem ipsum sumit dolar.  lorem ipsum sumit dolar.  lorem ipsum sumit dolar.  lorem ipsum sumit dolar.  lorem ipsum sumit dolar.  lorem ipsum sumit dolar.  lorem ipsum sumit dolar.  lorem ipsum sumit dolar.  lorem ipsum sumit dolar.  </p>
    <h2>Bar</h2>
    <p>lorem ipsum sumit dolar.  lorem ipsum sumit dolar.  lorem ipsum sumit dolar.  lorem ipsum sumit dolar.  lorem ipsum sumit dolar.  lorem ipsum sumit dolar.  lorem ipsum sumit dolar.  lorem ipsum sumit dolar.  lorem ipsum sumit dolar.  lorem ipsum sumit dolar.  lorem ipsum sumit dolar.  </p>
    <h2>Foo</h2>
    <p>lorem ipsum sumit dolar.  lorem ipsum sumit dolar.  lorem ipsum sumit dolar.  lorem ipsum sumit dolar.  lorem ipsum sumit dolar.  lorem ipsum sumit dolar.  lorem ipsum sumit dolar.  lorem ipsum sumit dolar.  lorem ipsum sumit dolar.  lorem ipsum sumit dolar.  lorem ipsum sumit dolar.  </p>
    <h2>Bar</h2>
    <p>lorem ipsum sumit dolar.  lorem ipsum sumit dolar.  lorem ipsum sumit dolar.  lorem ipsum sumit dolar.  lorem ipsum sumit dolar.  lorem ipsum sumit dolar.  lorem ipsum sumit dolar.  lorem ipsum sumit dolar.  lorem ipsum sumit dolar.  lorem ipsum sumit dolar.  lorem ipsum sumit dolar.  </p>
  </main>

  <nav class="page-layout-nav">
    <ul>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
    </ul>
  </nav>

  <aside class="page-layout-aside">
    <h2>In this article</h2>
    <ul>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
    </ul>
  </aside>
</div>

<footer class="page-footer">
  foo bar baz
</footer>

Gabriele Petrioli · Accepted Answer

You need to use align-self:flex-end on that element to allow sticking at the bottom.

Updated gist

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}

.page-header, .page-footer {
  height: 50px;
  background-color: #ccc;
}

.page-layout {
  display: flex;
  justify-content: space-between;
  margin: 16px 0;
}

.page-layout-nav, .page-layout-main, .page-layout-aside {
  border: 1px dotted;
}

.page-layout-nav {
  order: 0;
  width: calc(25% - 16px);
  align-self: flex-end;
}

.page-layout-main {
  order: 1;
  width: 50%;
}

.page-layout-aside {
  order: 2;
  width: calc(25% - 16px);
  align-self: flex-start;
}

.page-layout-nav, .page-layout-aside {
  position: sticky;
  top:16px;
  bottom: 16px;
  overflow: auto;
  max-height: calc(100vh - 50px - 16px - 16px); /* not quite right... */
}

<header class="page-header">
  Contoso
</header>
<div class="page-layout">
  <main class="page-layout-main">
    <h1>Hello World</h1>
    <p>lorem ipsum sumit dolar.  lorem ipsum sumit dolar.  lorem ipsum sumit dolar.  lorem ipsum sumit dolar.  lorem ipsum sumit dolar.  lorem ipsum sumit dolar.  lorem ipsum sumit dolar.  lorem ipsum sumit dolar.  lorem ipsum sumit dolar.  lorem ipsum sumit dolar.  lorem ipsum sumit dolar.  </p>
    <h2>Foo</h2>
    <p>lorem ipsum sumit dolar.  lorem ipsum sumit dolar.  lorem ipsum sumit dolar.  lorem ipsum sumit dolar.  lorem ipsum sumit dolar.  lorem ipsum sumit dolar.  lorem ipsum sumit dolar.  lorem ipsum sumit dolar.  lorem ipsum sumit dolar.  lorem ipsum sumit dolar.  lorem ipsum sumit dolar.  </p>
    <h2>Bar</h2>
    <p>lorem ipsum sumit dolar.  lorem ipsum sumit dolar.  lorem ipsum sumit dolar.  lorem ipsum sumit dolar.  lorem ipsum sumit dolar.  lorem ipsum sumit dolar.  lorem ipsum sumit dolar.  lorem ipsum sumit dolar.  lorem ipsum sumit dolar.  lorem ipsum sumit dolar.  lorem ipsum sumit dolar.  </p>
    <h2>Foo</h2>
    <p>lorem ipsum sumit dolar.  lorem ipsum sumit dolar.  lorem ipsum sumit dolar.  lorem ipsum sumit dolar.  lorem ipsum sumit dolar.  lorem ipsum sumit dolar.  lorem ipsum sumit dolar.  lorem ipsum sumit dolar.  lorem ipsum sumit dolar.  lorem ipsum sumit dolar.  lorem ipsum sumit dolar.  </p>
    <h2>Bar</h2>
    <p>lorem ipsum sumit dolar.  lorem ipsum sumit dolar.  lorem ipsum sumit dolar.  lorem ipsum sumit dolar.  lorem ipsum sumit dolar.  lorem ipsum sumit dolar.  lorem ipsum sumit dolar.  lorem ipsum sumit dolar.  lorem ipsum sumit dolar.  lorem ipsum sumit dolar.  lorem ipsum sumit dolar.  </p>
  </main>

  <nav class="page-layout-nav">
    <ul>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
    </ul>
  </nav>

  <aside class="page-layout-aside">
    <h2>In this article</h2>
    <ul>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">foo</a></li>
    </ul>
  </aside>
</div>

<footer class="page-footer">
  foo bar baz
</footer>

position sticky top and bottom page layout?

Tags:

html

css

sticky

Jeremy Danyow

1 Answers

Gabriele Petrioli

Recent Activity

Donate For Us

position sticky top and bottom page layout?

Tags:

html

css

sticky

Jeremy Danyow

1 Answers

Gabriele Petrioli

Related questions

Recent Activity

Donate For Us