滚动时不显示标题下方的粘性位置侧边栏

Question

I'm trying to show the sidebar below the header initially, which works fine when the user lands on the website, but when a user scrolls the page, the sidebar not taking the full height, basically I want to achieve sidebar to be fixed at the left once user scrolls just like shown here .

Here is my code snippet

 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

I removed height:100% on body and html and also .height , because there is no goal of that as they are adapting their height based on content.

Then I fixed the sidebar height to 100vh.

Now it is fixed. It only leaves at the end because you added a padding-bottom: 2000px; in your .body container.

 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>