位置粘性顶部和底部页面布局？答案

【问题标题】：position sticky top and bottom page layout?位置粘性顶部和底部页面布局？
【发布时间】：2017-12-22 04:42:30
【问题描述】：

有没有办法更新this gist 以使<nav> 元素坚持bottom:16px 直到<footer> 在用户滚动到页面底部时将其向上推？

我正在尝试找到一种方法，将<nav> 元素的底部与页脚顶部（或当页脚滚动到视口外时的视口底部）保持 16 像素。换句话说，我希望 nav 元素的底部和页脚的行为与 nav 元素的顶部和页眉的行为一样。

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

这是显示我正在尝试修复的屏幕截图：

应该保留<nav> 元素顶部的当前行为。它距离<header> 的顶部（或当标头在视口之外时的视口顶部）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>

【问题讨论】：

你有没有设法解决这个问题？我正在尝试做类似的事情...谢谢！
否 - 尚未解决

标签： html css sticky

【解决方案1】：

您需要在该元素上使用align-self:flex-end 以允许粘贴在底部。

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>

【讨论】：

感谢您的回答！看起来很有希望 - 我已经编辑了我的问题，试图让我更清楚我想要做什么。我想将
元素的底部与页脚顶部（或当页脚滚动到视口外时的视口底部）保持 16px 的距离。
@JeremyDanyow 这不是 sn-p 中发生的事情吗？
是的-我的错，我已经对我的问题进行了进一步的澄清。道歉！我想保留 <nav> 元素顶部的当前行为。它距离<header> 的顶部 16px（或者当标题在视口之外时，视口的顶部）。换句话说，我如何使 nav 元素底部的行为与 nav 元素顶部的行为方式相同。

【解决方案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>

【讨论】：

感谢您的回答！看起来很有希望 - 我已经编辑了我的问题，试图让我更清楚我想要做什么。我想将
元素的底部与页脚顶部（或当页脚滚动到视口外时的视口底部）保持 16px 的距离。
@JeremyDanyow 好的，所以我们必须先删除您的解决方法，然后再尝试寻找解决方案？