固定定位在页面顶部和底部的布局？

Question

有没有一种方法可以更新this gist，使得<nav>元素保持在bottom:16px，直到用户滚动到页面底部时<footer>将其推上去？

我正在尝试找到一种方法，使<nav>元素的底部距离页脚顶部（或当页脚滚动到视口外时，距离视口底部）为16像素。换句话说，我希望导航元素和页脚的底部行为就像我的gist中导航元素和标题行为一样。

在我的gist中，max-height: calc(100vh - 50px - 16px - 16px); 只是一种解决方法。实际上，最大高度取决于标题和/或页脚是否在视口中。

这是一个截图，显示了我要修复的问题：

应保留当前的 <nav> 元素顶部行为。它距离 <header> 顶部 16px（当头部在视窗之外时，距离视窗顶部 16px）。

* {
  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>

- Jeremy Danyow

---

你最终解决了这个问题吗？我正在尝试做类似的事情...谢谢！ - Andy Castles

没有-尚未解决 - Jeremy Danyow

Answer 1

你需要在该元素上使用align-self:flex-end，以允许其停留在底部。

更新的代码片段

* {
  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>

- Gabriele Petrioli

---

谢谢您的回答！看起来很有前途 - 我编辑了我的问题，试图让我正在尝试做什么更清楚。我想让<nav>元素的底部距离页脚顶部16像素（或在页脚滚动到视口外时距离视口底部16像素）。 - Jeremy Danyow

@JeremyDanyow 这不就是代码片段中正在发生的事情吗？ - Gabriele Petrioli

是的-我的错，我已经对我的问题进行了进一步的澄清。抱歉！ 我想保留当前<nav>元素顶部的行为。它距离<header>的顶部（或当标题在视口外时距离视口顶部）16像素。换句话说，我如何使<nav>元素底部的行为与<nav>元素顶部的行为相同。 - Jeremy Danyow

Answer 2

您可以简单地在导航栏中添加margin-top:auto：

* {
  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);
  margin-top:auto;
}

.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>

- Temani Afif

---

谢谢你的回答！看起来很有前途-我编辑了我的问题，试图让它更清楚我想要做什么。我想让<nav>元素的底部距离页脚顶部16像素（或者当页脚滚动到视口外时，距离视口底部16像素）。 - Jeremy Danyow

@JeremyDanyow 好的，那么我们首先必须删除您的解决方法，然后尝试找到一个解决方案吗？ - Temani Afif