1
this gistを更新する方法はありますか？<nav>要素がbottom:16pxに固執するまで、<footer>はユーザーがページの最下部にスクロールするまで押し込まれますか？スティッキーなトップページレイアウトとボトムページレイアウト？
<nav>要素の16pxの下端をフッターの上部（またはフッターがビューポートの外にスクロールされているときは、ビューポートの下部）から維持する方法を見つけようとしています。言い換えれば、nav要素の一番下のように、nav要素とfooterの一番下が動作し、ヘッダーが私の要点で動作するようにします。
私の意見ではmax-height: calc(100vh - 50px - 16px - 16px);は回避策に過ぎません。実際の最大高さは、ヘッダーやフッターがビューポートにあるかどうかによって異なります。
ここで私が修正しようとしてるかを示してスクリーンショットです：
<nav>要素のトップの現在の動作が保存されるべきでは。 <header>（またはヘッダーがビューポートの外側にある場合はビューポートの上部）の上から16ピクセルです。
* {
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>
あなたの答えをありがとう！有望に見える - 私は何をしようとしているのかを明確にしようと私の質問を編集しました。フッタの上端（または、フッターがビューポートの外側にスクロールされているときは、ビューポートの下端）から、
@ JeremyDanyowはスニペットで何が起こっているのではないですか？ –
はい - 私のせいで、私は私の質問にさらに明確化を加えました。お詫び！ '