css - 位置粘性，但始终在视口(viewport)底部

Question

我想制作一个侧边栏导航，其行为类似于 position: sticky 和 position: fixed 在一起。
我无法制作具有动态高度的粘性元素。理想情况下，我只想使用 CSS 来完成。

侧边栏位于标题之后(不固定)，我希望当您滚动经过标题时侧边栏停留在浏览器的顶部(因此 position: sticky 非常适合那个)。
但我希望侧边栏的底部始终位于浏览器 View 的底部。像 position: fixed。

到目前为止，我的结果是以下片段:
当您位于代码段顶部并滚动到侧边栏底部时，元素 18 保持隐藏状态，因为侧边栏超出了 View 。
如果您滚动经过主容器中的标题，侧边栏没问题，因为它的大小为 100vh。

我很想将 bottom: 0; 设置为固定在底部的粘性元素，但只有当我将粘性元素设置为 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>