位置粘稠的顶部和底部页面布局？ [英] position sticky top and bottom page layout?

查看：65
本文介绍了位置粘稠的顶部和底部页面布局？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

是否有一种方法可以更新



< nav> 元素应保留。它距< header> 的顶部（或当标题位于视口外部时，视口的顶部）顶部16像素。



  * {box-sizing：border-box;} html，body {margin：0; padding：0;}。page-header，.page-footer {height：50px;背景颜色：#ccc;}。page-layout {display：flex;证明内容：间隔； align-items：flex-start;边距：16px 0；}。page-layout-nav，.page-layout-main，.page-layout-aside {边框：点缀1px；}。page-layout-nav {顺序：0;宽度：calc（25％-16px）;}。page-layout-main {顺序：1;宽度：50％；}。page-layout-aside {顺序：2;宽度：calc（25％-16px）;}。page-layout-nav，.page-layout-aside {位置：粘性；顶部：16px；底部：16px；溢出：自动；最大高度：calc（100vh-50px-16px-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>在本文中< / 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>

解决方案

您可以简单地将 margin-top：auto 添加到导航中：



  * {box-sizing：border-box;} html，body {margin：0; padding：0;}。page-header，.page-footer {height：50px;背景颜色：#ccc;}。page-layout {display：flex;证明内容：间隔； align-items：flex-start;边距：16px 0；}。page-layout-nav，.page-layout-main，.page-layout-aside {边框：点缀1px；}。page-layout-nav {顺序：0;宽度：calc（25％-16px）; margin-top：auto;}。page-layout-main {顺序：1;宽度：50％；}。page-layout-aside {顺序：2;宽度：calc（25％-16px）;}。page-layout-nav，.page-layout-aside {位置：粘性；顶部：16px；底部：16px；溢出：自动；最大高度：calc（100vh-50px-16px-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>在本文中< / 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>


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:

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>

解决方案

You can simply add margin-top:auto to the nav :

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

这篇关于位置粘稠的顶部和底部页面布局？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆