header 下方的粘性位置边栏在滚动时不显示

Question

我最初尝试在 header 下方显示侧边栏，当用户登陆网站时效果很好，但是当用户滚动页面时，侧边栏基本上没有占据全部高度一旦用户像 shown here.

一样滚动，我想实现侧边栏固定在左侧

这是我的代码片段

html,
body {
  height: 100%;
}

.header {
  border: 1px solid black;
  height: 60px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.body {
  height: 100%;
  background-color: tomato;
  display: flex;
  padding-bottom: 2000px;
}

.sidebar {
  width: 30%;
  position: -webkit-sticky;
  position: sticky;
  height: 100%;
  background: black;
  color: white;
  /* top: 0px; */
}

.content {
  padding: 80px;
}

<div class="header">HEADER</div>
<div class="body">
  <div class="sidebar">SIDEBAR</div>
  <div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio saepe tempora, voluptas quidem provident atque iste officiis repudiandae expedita, impedit error maxime laboriosam sit qui porro, quo eligendi inventore fugit.Lorem ipsum dolor sit amet,
    consectetur adipisicing elit. Quam non, omnis saepe error nesciunt magnam velit architecto! Pariatur possimus culpa dolor soluta laudantium at neque, consequuntur, mollitia sunt, necessitatibus vitae!Lorem ipsum dolor sit amet, consectetur adipisicing
    elit. Nesciunt laboriosam, facere laborum totam in qui ex illum necessitatibus, minus numquam enim! Distinctio facilis est reprehenderit sunt quasi consequuntur ullam autem.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum ut doloremque
    cupiditate facilis aliquid, voluptatibus at illo similique velit sequi dignissimos consectetur placeat, vero excepturi neque facere tempore id ratione.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem dignissimos veritatis libero praesentium
    reprehenderit sequi. A, repellendus, hic. Laborum, et ea voluptas facere! Enim id soluta optio, quam totam officiis!</div>
</div>

Answer 1

我删除了 body 上的 height:100% 和 html 以及 .height，因为没有目标，因为他们正在根据内容调整高度。

然后我将侧边栏的高度固定为 100vh。

现已修复。它只留在最后，因为您在 .body 容器中添加了 padding-bottom: 2000px;。

html,
body {
  /*height: 100%;*/
}

.header {
  border: 1px solid black;
  height: 60px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.body {
  /*height: 100%;*/
  background-color: tomato;
  display: flex;
  padding-bottom: 2000px;
}

.sidebar {
  width: 30%;
  position: -webkit-sticky;
  position: sticky;
  height: 100vh;
  background: black;
  color: white;
  top: 0;
}

.content {
  padding: 80px;
}

<div class="header">HEADER</div>
<div class="body">
  <div class="sidebar">SIDEBAR</div>
  <div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio saepe tempora, voluptas quidem provident atque iste officiis repudiandae expedita, impedit error maxime laboriosam sit qui porro, quo eligendi inventore fugit.Lorem ipsum dolor sit amet,
    consectetur adipisicing elit. Quam non, omnis saepe error nesciunt magnam velit architecto! Pariatur possimus culpa dolor soluta laudantium at neque, consequuntur, mollitia sunt, necessitatibus vitae!Lorem ipsum dolor sit amet, consectetur adipisicing
    elit. Nesciunt laboriosam, facere laborum totam in qui ex illum necessitatibus, minus numquam enim! Distinctio facilis est reprehenderit sunt quasi consequuntur ullam autem.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum ut doloremque
    cupiditate facilis aliquid, voluptatibus at illo similique velit sequi dignissimos consectetur placeat, vero excepturi neque facere tempore id ratione.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem dignissimos veritatis libero praesentium
    reprehenderit sequi. A, repellendus, hic. Laborum, et ea voluptas facere! Enim id soluta optio, quam totam officiis!</div>
</div>

header 下方的粘性位置边栏在滚动时不显示

sticky position sidebar beneath the header not showing while scrolling

html

css

position

flexbox