スティッキーですが、常にビューポートの下部にあります

Question

position: stickyとposition: fixedのような種類の挙動をするサイドバーナビゲーションを作りたいと思います。
動的な高さを持つスティッキー要素を作成できません。理想的には私はCSSだけでそれをやりたい

サイドバーはヘッダー（固定されていません）の後ろにあり、ヘッダーをスクロールするとサイドバーがブラウザの上部にスティックされるようにします（position: stickyはそれに最適です）。
しかし、私はサイドバーの底が常にブラウザのビューの一番下にくるようにしたい。 position: fixedのように。

私の結果はこれまでのところ、以下の抜粋です。
スニペットの上部にあり、そしてあなたは、サイドバーの一番下にスクロールすると、サイドバーが表示越えて行くので、項目18は隠されたまま。
メインコンテナのヘッダーをスクロールすると、サイドバーには100vhサイズがあるので問題ありません。

スティッキーエレメ​​ントをスティッキーエレメ​​ントに設定したい、下に固定するのが大好きですが、スティッキーエレメ​​ントをposition: fixed;に設定しても効果があります。ここで

.header { 
 
    background-color: grey; 
 
    height: 30px; 
 
} 
 

 
.container { 
 
    display: flex; 
 
} 
 

 
.nav { 
 
    color: white; 
 
    background-color: black; 
 
    width: 7rem; 
 
} 
 

 
.sticky-nav { 
 
    position: sticky; 
 
    top: 0; 
 
    height: 100vh; 
 
    overflow-y: scroll; 
 
} 
 

 
.content { 
 
    background-color: #ccc; 
 
    width: 100%; 
 
}

<div class="header">Header</div> 
 

 
<div class="container"> 
 
    <div class="nav"> 
 
    <div class="sticky-nav"> 
 
     <p>Item 1</p> 
 
     <p>Item 2</p> 
 
     <p>Item 3</p> 
 
     <p>Item 4</p> 
 
     <p>Item 5</p> 
 
     <p>Item 6</p> 
 
     <p>Item 7</p> 
 
     <p>Item 8</p> 
 
     <p>Item 9</p> 
 
     <p>Item 10</p> 
 
     <p>Item 11</p> 
 
     <p>Item 12</p> 
 
     <p>Item 13</p> 
 
     <p>Item 14</p> 
 
     <p>Item 15</p> 
 
     <p>Item 16</p> 
 
     <p>Item 17</p> 
 
     <p>Item 18</p> 
 
    </div> 
 
    </div> 
 
    <div class="content"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vel nisl iaculis sem ullamcorper laoreet vel posuere urna. Sed venenatis sem quis mattis auctor. Proin a urna risus. Maecenas eu purus semper, semper nibh a, pharetra est. Nunc ultrices elit convallis tristique consequat. Phasellus placerat velit sapien, vitae rhoncus arcu ultrices at. In sodales sodales lorem, vitae efficitur arcu pulvinar ac. Nam finibus luctus luctus. Ut aliquet ullamcorper tempor. Nullam a malesuada est, rhoncus elementum nibh. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam lobortis pulvinar est eu dignissim. 
 

 
Aenean pretium enim et libero vehicula, a scelerisque enim viverra. Phasellus ullamcorper tortor ac nisl ornare, eu volutpat libero efficitur. Vivamus vitae nisi viverra, ullamcorper diam vitae, consequat ipsum. Sed maximus congue ipsum, id euismod arcu porttitor eget. Nam quis egestas risus. Sed quam augue, vestibulum ut lectus in, posuere interdum turpis. Cras ac egestas sem. Aliquam vitae sem ut tortor auctor aliquet a eu orci. Vivamus eu maximus lorem, placerat feugiat nisl. Suspendisse venenatis interdum tortor, non pellentesque dui suscipit nec. In imperdiet tincidunt convallis. In fringilla nisl id dolor aliquam, ut posuere felis efficitur. Aliquam id blandit elit, in euismod ante. Sed malesuada nisl ornare elementum ullamcorper. In vestibulum gravida libero, a finibus mi gravida eu. 
 

 
Aenean ullamcorper arcu sed leo sodales commodo. Aenean in ex vitae lacus vulputate blandit sed eu sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at orci vel arcu volutpat eleifend. Quisque eu erat at lacus fringilla tincidunt. Nunc enim purus, posuere quis est a, pretium tincidunt est. Vivamus suscipit, neque quis aliquet dignissim, nisi lectus varius nisl, vel eleifend justo leo vel augue. Phasellus feugiat volutpat turpis. In eros mi, pulvinar vitae massa vel, vulputate varius nunc. Aliquam consectetur tortor vehicula, finibus felis tempor, hendrerit risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam pretium porttitor ante ac convallis. Nunc sollicitudin sed nunc congue dictum. Morbi pellentesque turpis bibendum turpis consectetur molestie. Integer luctus non libero vitae congue. Aliquam ex odio, vulputate interdum sagittis et, lobortis interdum eros. 
 

 
Aliquam tincidunt rhoncus turpis et sagittis. Etiam ullamcorper augue id interdum fermentum. Morbi vitae nisi lorem. Proin a cursus nibh, at facilisis dolor. Nulla eu urna viverra dolor sodales mattis non et est. Quisque sagittis arcu tempor, aliquam mauris ut, porttitor velit. Phasellus nec tempus urna, eu aliquet ante. Vestibulum ultricies metus eu arcu pellentesque gravida. Curabitur ac mollis lorem. Donec ullamcorper viverra dolor, id ultrices urna fringilla at. Nulla placerat leo sed vulputate feugiat. Maecenas at consectetur massa, eget mollis enim. Quisque felis nisl, blandit sit amet ultrices vel, ultrices at justo. In hac habitasse platea dictumst. 
 

 
Curabitur commodo tellus vitae ex egestas, in maximus ligula pellentesque. Vestibulum dictum metus non magna sollicitudin ornare. Etiam consequat placerat eros, nec lobortis massa gravida id. Suspendisse elementum risus ac semper faucibus. Suspendisse ut interdum tortor. Aliquam ornare imperdiet dapibus. Ut lacinia consequat metus, at accumsan mauris pretium sed. In nec congue ante. Nam nec arcu vitae eros iaculis molestie. Phasellus vitae eleifend nunc, tincidunt suscipit eros. Suspendisse leo ligula, tempor in sagittis ut, commodo id purus. Mauris nec lectus augue. Phasellus in tellus erat. 
 

 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vel nisl iaculis sem ullamcorper laoreet vel posuere urna. Sed venenatis sem quis mattis auctor. Proin a urna risus. Maecenas eu purus semper, semper nibh a, pharetra est. Nunc ultrices elit convallis tristique consequat. Phasellus placerat velit sapien, vitae rhoncus arcu ultrices at. In sodales sodales lorem, vitae efficitur arcu pulvinar ac. Nam finibus luctus luctus. Ut aliquet ullamcorper tempor. Nullam a malesuada est, rhoncus elementum nibh. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam lobortis pulvinar est eu dignissim. 
 

 
Aenean pretium enim et libero vehicula, a scelerisque enim viverra. Phasellus ullamcorper tortor ac nisl ornare, eu volutpat libero efficitur. Vivamus vitae nisi viverra, ullamcorper diam vitae, consequat ipsum. Sed maximus congue ipsum, id euismod arcu porttitor eget. Nam quis egestas risus. Sed quam augue, vestibulum ut lectus in, posuere interdum turpis. Cras ac egestas sem. Aliquam vitae sem ut tortor auctor aliquet a eu orci. Vivamus eu maximus lorem, placerat feugiat nisl. Suspendisse venenatis interdum tortor, non pellentesque dui suscipit nec. In imperdiet tincidunt convallis. In fringilla nisl id dolor aliquam, ut posuere felis efficitur. Aliquam id blandit elit, in euismod ante. Sed malesuada nisl ornare elementum ullamcorper. In vestibulum gravida libero, a finibus mi gravida eu. 
 

 
Aenean ullamcorper arcu sed leo sodales commodo. Aenean in ex vitae lacus vulputate blandit sed eu sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at orci vel arcu volutpat eleifend. Quisque eu erat at lacus fringilla tincidunt. Nunc enim purus, posuere quis est a, pretium tincidunt est. Vivamus suscipit, neque quis aliquet dignissim, nisi lectus varius nisl, vel eleifend justo leo vel augue. Phasellus feugiat volutpat turpis. In eros mi, pulvinar vitae massa vel, vulputate varius nunc. Aliquam consectetur tortor vehicula, finibus felis tempor, hendrerit risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam pretium porttitor ante ac convallis. Nunc sollicitudin sed nunc congue dictum. Morbi pellentesque turpis bibendum turpis consectetur molestie. Integer luctus non libero vitae congue. Aliquam ex odio, vulputate interdum sagittis et, lobortis interdum eros. 
 

 
Aliquam tincidunt rhoncus turpis et sagittis. Etiam ullamcorper augue id interdum fermentum. Morbi vitae nisi lorem. Proin a cursus nibh, at facilisis dolor. Nulla eu urna viverra dolor sodales mattis non et est. Quisque sagittis arcu tempor, aliquam mauris ut, porttitor velit. Phasellus nec tempus urna, eu aliquet ante. Vestibulum ultricies metus eu arcu pellentesque gravida. Curabitur ac mollis lorem. Donec ullamcorper viverra dolor, id ultrices urna fringilla at. Nulla placerat leo sed vulputate feugiat. Maecenas at consectetur massa, eget mollis enim. Quisque felis nisl, blandit sit amet ultrices vel, ultrices at justo. In hac habitasse platea dictumst. 
 

 
Curabitur commodo tellus vitae ex egestas, in maximus ligula pellentesque. Vestibulum dictum metus non magna sollicitudin ornare. Etiam consequat placerat eros, nec lobortis massa gravida id. Suspendisse elementum risus ac semper faucibus. Suspendisse ut interdum tortor. Aliquam ornare imperdiet dapibus. Ut lacinia consequat metus, at accumsan mauris pretium sed. In nec congue ante. Nam nec arcu vitae eros iaculis molestie. Phasellus vitae eleifend nunc, tincidunt suscipit eros. Suspendisse leo ligula, tempor in sagittis ut, commodo id purus. Mauris nec lectus augue. Phasellus in tellus erat. 
 
    </div> 
 
</div>

Answer 1

純粋にCSSで作られた答えです。 CSSのcalcプロパティを使用すると、CSSを使用してこのことを簡単に達成できます。

*{ 
 
box-sizing:border-box; 
 
-webkit-box-sizing:border-box; 
 
-moz-box-sizing:border-box; 
 
} 
 
body,html{margin:0px; padding:0px;} 
 
.header { 
 
    background-color: grey; 
 
    height: 30px; 
 
    position:fixed; /* setting to be at top always */ 
 
    width:100%; /* fix pposition will require a width to occupy space */ 
 
} 
 

 
.container { 
 
    display: flex; 
 
    
 
} 
 

 
.nav { 
 
    color: white; 
 
    background-color: black; 
 
    width: 7rem; 
 
    position:fixed; /* position fix to keep it on position */ 
 
    top: 30px; /* equal to height of header */ 
 
    
 
} 
 

 
.sticky-nav { 
 

 
    height: calc(100vh - 30px); /* calculating height according to browser height subtracting the top height of header*/ 
 
    overflow-y: scroll; 
 
    
 
} 
 

 
.content { 
 
    background-color: #ccc; 
 
    width: 100%; 
 
    padding:5px; 
 
    padding-left:7rem; /* padding left = width of 7rem*/ 
 
    margin-top:30px; 
 
}

<div class="header">Header</div> 
 

 
<div class="container"> 
 
    <div class="nav"> 
 
    <div class="sticky-nav"> 
 
     <p>Item 1</p> 
 
     <p>Item 2</p> 
 
     <p>Item 3</p> 
 
     <p>Item 4</p> 
 
     <p>Item 5</p> 
 
     <p>Item 6</p> 
 
     <p>Item 7</p> 
 
     <p>Item 8</p> 
 
     <p>Item 9</p> 
 
     <p>Item 10</p> 
 
     <p>Item 11</p> 
 
     <p>Item 12</p> 
 
     <p>Item 13</p> 
 
     <p>Item 14</p> 
 
     <p>Item 15</p> 
 
     <p>Item 16</p> 
 
     <p>Item 17</p> 
 
     <p>Item 18</p> 
 
    </div> 
 
    </div> 
 
    <div class="content"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vel nisl iaculis sem ullamcorper laoreet vel posuere urna. Sed venenatis sem quis mattis auctor. Proin a urna risus. Maecenas eu purus semper, semper nibh a, pharetra est. Nunc ultrices elit convallis tristique consequat. Phasellus placerat velit sapien, vitae rhoncus arcu ultrices at. In sodales sodales lorem, vitae efficitur arcu pulvinar ac. Nam finibus luctus luctus. Ut aliquet ullamcorper tempor. Nullam a malesuada est, rhoncus elementum nibh. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam lobortis pulvinar est eu dignissim. 
 

 
Aenean pretium enim et libero vehicula, a scelerisque enim viverra. Phasellus ullamcorper tortor ac nisl ornare, eu volutpat libero efficitur. Vivamus vitae nisi viverra, ullamcorper diam vitae, consequat ipsum. Sed maximus congue ipsum, id euismod arcu porttitor eget. Nam quis egestas risus. Sed quam augue, vestibulum ut lectus in, posuere interdum turpis. Cras ac egestas sem. Aliquam vitae sem ut tortor auctor aliquet a eu orci. Vivamus eu maximus lorem, placerat feugiat nisl. Suspendisse venenatis interdum tortor, non pellentesque dui suscipit nec. In imperdiet tincidunt convallis. In fringilla nisl id dolor aliquam, ut posuere felis efficitur. Aliquam id blandit elit, in euismod ante. Sed malesuada nisl ornare elementum ullamcorper. In vestibulum gravida libero, a finibus mi gravida eu. 
 

 
Aenean ullamcorper arcu sed leo sodales commodo. Aenean in ex vitae lacus vulputate blandit sed eu sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at orci vel arcu volutpat eleifend. Quisque eu erat at lacus fringilla tincidunt. Nunc enim purus, posuere quis est a, pretium tincidunt est. Vivamus suscipit, neque quis aliquet dignissim, nisi lectus varius nisl, vel eleifend justo leo vel augue. Phasellus feugiat volutpat turpis. In eros mi, pulvinar vitae massa vel, vulputate varius nunc. Aliquam consectetur tortor vehicula, finibus felis tempor, hendrerit risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam pretium porttitor ante ac convallis. Nunc sollicitudin sed nunc congue dictum. Morbi pellentesque turpis bibendum turpis consectetur molestie. Integer luctus non libero vitae congue. Aliquam ex odio, vulputate interdum sagittis et, lobortis interdum eros. 
 

 
Aliquam tincidunt rhoncus turpis et sagittis. Etiam ullamcorper augue id interdum fermentum. Morbi vitae nisi lorem. Proin a cursus nibh, at facilisis dolor. Nulla eu urna viverra dolor sodales mattis non et est. Quisque sagittis arcu tempor, aliquam mauris ut, porttitor velit. Phasellus nec tempus urna, eu aliquet ante. Vestibulum ultricies metus eu arcu pellentesque gravida. Curabitur ac mollis lorem. Donec ullamcorper viverra dolor, id ultrices urna fringilla at. Nulla placerat leo sed vulputate feugiat. Maecenas at consectetur massa, eget mollis enim. Quisque felis nisl, blandit sit amet ultrices vel, ultrices at justo. In hac habitasse platea dictumst. 
 

 
Curabitur commodo tellus vitae ex egestas, in maximus ligula pellentesque. Vestibulum dictum metus non magna sollicitudin ornare. Etiam consequat placerat eros, nec lobortis massa gravida id. Suspendisse elementum risus ac semper faucibus. Suspendisse ut interdum tortor. Aliquam ornare imperdiet dapibus. Ut lacinia consequat metus, at accumsan mauris pretium sed. In nec congue ante. Nam nec arcu vitae eros iaculis molestie. Phasellus vitae eleifend nunc, tincidunt suscipit eros. Suspendisse leo ligula, tempor in sagittis ut, commodo id purus. Mauris nec lectus augue. Phasellus in tellus erat. 
 

 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vel nisl iaculis sem ullamcorper laoreet vel posuere urna. Sed venenatis sem quis mattis auctor. Proin a urna risus. Maecenas eu purus semper, semper nibh a, pharetra est. Nunc ultrices elit convallis tristique consequat. Phasellus placerat velit sapien, vitae rhoncus arcu ultrices at. In sodales sodales lorem, vitae efficitur arcu pulvinar ac. Nam finibus luctus luctus. Ut aliquet ullamcorper tempor. Nullam a malesuada est, rhoncus elementum nibh. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam lobortis pulvinar est eu dignissim. 
 

 
Aenean pretium enim et libero vehicula, a scelerisque enim viverra. Phasellus ullamcorper tortor ac nisl ornare, eu volutpat libero efficitur. Vivamus vitae nisi viverra, ullamcorper diam vitae, consequat ipsum. Sed maximus congue ipsum, id euismod arcu porttitor eget. Nam quis egestas risus. Sed quam augue, vestibulum ut lectus in, posuere interdum turpis. Cras ac egestas sem. Aliquam vitae sem ut tortor auctor aliquet a eu orci. Vivamus eu maximus lorem, placerat feugiat nisl. Suspendisse venenatis interdum tortor, non pellentesque dui suscipit nec. In imperdiet tincidunt convallis. In fringilla nisl id dolor aliquam, ut posuere felis efficitur. Aliquam id blandit elit, in euismod ante. Sed malesuada nisl ornare elementum ullamcorper. In vestibulum gravida libero, a finibus mi gravida eu. 
 

 
Aenean ullamcorper arcu sed leo sodales commodo. Aenean in ex vitae lacus vulputate blandit sed eu sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at orci vel arcu volutpat eleifend. Quisque eu erat at lacus fringilla tincidunt. Nunc enim purus, posuere quis est a, pretium tincidunt est. Vivamus suscipit, neque quis aliquet dignissim, nisi lectus varius nisl, vel eleifend justo leo vel augue. Phasellus feugiat volutpat turpis. In eros mi, pulvinar vitae massa vel, vulputate varius nunc. Aliquam consectetur tortor vehicula, finibus felis tempor, hendrerit risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam pretium porttitor ante ac convallis. Nunc sollicitudin sed nunc congue dictum. Morbi pellentesque turpis bibendum turpis consectetur molestie. Integer luctus non libero vitae congue. Aliquam ex odio, vulputate interdum sagittis et, lobortis interdum eros. 
 

 
Aliquam tincidunt rhoncus turpis et sagittis. Etiam ullamcorper augue id interdum fermentum. Morbi vitae nisi lorem. Proin a cursus nibh, at facilisis dolor. Nulla eu urna viverra dolor sodales mattis non et est. Quisque sagittis arcu tempor, aliquam mauris ut, porttitor velit. Phasellus nec tempus urna, eu aliquet ante. Vestibulum ultricies metus eu arcu pellentesque gravida. Curabitur ac mollis lorem. Donec ullamcorper viverra dolor, id ultrices urna fringilla at. Nulla placerat leo sed vulputate feugiat. Maecenas at consectetur massa, eget mollis enim. Quisque felis nisl, blandit sit amet ultrices vel, ultrices at justo. In hac habitasse platea dictumst. 
 

 
Curabitur commodo tellus vitae ex egestas, in maximus ligula pellentesque. Vestibulum dictum metus non magna sollicitudin ornare. Etiam consequat placerat eros, nec lobortis massa gravida id. Suspendisse elementum risus ac semper faucibus. Suspendisse ut interdum tortor. Aliquam ornare imperdiet dapibus. Ut lacinia consequat metus, at accumsan mauris pretium sed. In nec congue ante. Nam nec arcu vitae eros iaculis molestie. Phasellus vitae eleifend nunc, tincidunt suscipit eros. Suspendisse leo ligula, tempor in sagittis ut, commodo id purus. Mauris nec lectus augue. Phasellus in tellus erat. 
 
    </div> 
 
</div>