粘贴顶部和底部页面布局？

Question

有没有办法更新this gist，以便当用户滚动到页面底部时<nav>元素粘贴bottom:16px，直到<footer>推送它为止<nav> ？

我正在尝试找到一种方法，使页脚顶部的max-height: calc(100vh - 50px - 16px - 16px);元素16px保持底部（或者当页脚在视口外滚动时，视口底部）。换句话说，我希望导航元素和页脚的底部表现得像导航元素的顶部，标题在我的要点中表现。

我的要点中的<nav>只是一种解决方法。实际上，最大高度取决于页眉和/或页脚是否在视口中。

这是一个屏幕截图，显示了我正在尝试解决的问题：

应保留<header>元素顶部的当前行为。它距离* { 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... */ }的顶部是16px（当标题位于视口之外时，或视口的顶部）。

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

function multi_array_search($array, $search)
{
    $result = array();

    foreach ($array as $key => $val)
    {
        foreach ($search as $k => $v)
        {
            // We check if the $k has an operator.
            $operator = '=';
            if (preg_match('(<|<=|>|>=|!=|=)', $k, $m) === 1)
            {
                // We change the operator.
                $operator = $m[0];

                // We trim $k to remove white spaces before and after.
                $k = trim(str_replace($m[0], '', $k));
            }

            switch ($operator)
            {
                case '=':
                    $cond = ($val[$k] != $v);
                    break;

                case '!=':
                    $cond = ($val[$k] == $v);
                    break;

                case '>':
                    $cond = ($val[$k] <= $v);
                    break;

                case '<':
                    $cond = ($val[$k] >= $v);
                    break;

                case '>=':
                    $cond = ($val[$k] < $sv);
                    break;

                case '<=':
                    $cond = ($val[$k] > $sv);
                    break;
            }

            if (( ! isset($val[$k]) && $val[$k] !== null) OR $cond)
            {
                continue 2;
            }
        }

        $result[] = $key;
    }

    return $result;
}  

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

Answer 2

您只需将margin-top:auto添加到导航栏：

即可

＆＃13;

＆＃13;

* {
  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... */
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;