I want to stick the last of the link on the sidebar to the bottom, like this.
It is not difficult, while the height sidebar and main content are equal. If the content great that one screen last link of the sidebar is gone. I test it on https://codepen.io/deni5n/pen/QWKRmMj
I was trying to add position fixed, freeze height to 100vh, and z-index to the sidebar. It is worked, but if add many links, the last link is gone.
html
<div class="container">
<div class="sidebar">
<div class="link-one">link One</div>
<div class="link-two">link Two</div>
<div class="link-three">link Three</div>
<div class="link-footer">link Footer</div>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab alias asperiores assumenda autem cumque dolore doloremque eligendi, esse est facere fugit laborum maiores mollitia nemo optio perferendis quae quas quibusdam quo quos ratione, rerum saepe sed tenetur voluptates! Aspernatur beatae delectus dolorum est exercitationem, obcaecati perspiciatis possimu
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab alias asperiores assumenda autem cumque dolore doloremque eligendi, esse est facere fugit laborum maiores mollitia nemo optio perferendis quae quas quibusdam quo quos ratione, rerum saepe sed tenetur voluptates! Aspernatur beatae delectus dolorum est exercitationem, obcaecati perspiciatis possimu
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab alias asperiores assumenda autem cumque dolore doloremque eligendi, esse est facere fugit laborum maiores mollitia nemo optio perferendis quae quas quibusdam quo quos ratione, rerum saepe sed tenetur voluptates! Aspernatur beatae delectus dolorum est exercitationem, obcaecati perspiciatis possimu
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab alias asperiores assumenda autem cumque dolore doloremque eligendi, esse est facere fugit laborum maiores mollitia nemo optio perferendis quae quas quibusdam quo quos ratione, rerum saepe sed tenetur voluptates! Aspernatur beatae delectus dolorum est exercitationem, obcaecati perspiciatis possimu
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab alias asperiores assumenda autem cumque dolore doloremque eligendi, esse est facere fugit laborum maiores mollitia nemo optio perferendis quae quas quibusdam quo quos ratione, rerum saepe sed tenetur voluptates! Aspernatur beatae delectus dolorum est exercitationem, obcaecati perspiciatis possimu
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab alias asperiores assumenda autem cumque dolore doloremque eligendi, esse est facere fugit laborum maiores mollitia nemo optio perferendis quae quas quibusdam quo quos ratione, rerum saepe sed tenetur voluptates! Aspernatur beatae delectus dolorum est exercitationem, obcaecati perspiciatis possimu
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab alias asperiores assumenda autem cumque dolore doloremque eligendi, esse est facere fugit laborum maiores mollitia nemo optio perferendis quae quas quibusdam quo quos ratione, rerum saepe sed tenetur voluptates! Aspernatur beatae delectus dolorum est exercitationem, obcaecati perspiciatis possimu
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab alias asperiores assumenda autem cumque dolore doloremque eligendi, esse est facere fugit laborum maiores mollitia nemo optio perferendis quae quas quibusdam quo quos ratione, rerum saepe sed tenetur voluptates! Aspernatur beatae delectus dolorum est exercitationem, obcaecati perspiciatis possimu
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab alias asperiores assumenda autem cumque dolore doloremque eligendi, esse est facere fugit laborum maiores mollitia nemo optio perferendis quae quas quibusdam quo quos ratione, rerum saepe sed tenetur voluptates! Aspernatur beatae delectus dolorum est exercitationem, obcaecati perspiciatis possimu
</p>
</div>
</div>
css
html{
heigth: 100%;
}
.container{
display: flex;
width: 100%;
}
.sidebar{
min-width: 200px;
max-width: 200px;
color: #ccc;
background: #313a46;
padding: 10px 0 0 10px;
display: flex;
flex-direction: column;
}
.sidebar .link-one{
padding: 10px 0;
}
.sidebar [class^="link-"]:not(:first-of-type){
padding: 10px 0;
}
.sidebar .link-footer{
margin-top: auto;
color: red;
}
.content{
display: flex;
width: 100%;
min-height: 100vh;
min-width: 0;
flex-direction: column;
padding: 10px
}
.content p:not(:first-of-type){
padding-top: 10px;
}
If you know, how to do this, please tell me
UPDATE
I still don’t know how to do it in html/css. However, since my NuxtJs project, I added to the class sidebar :style = "{'min-height': minHeight}, two hooks:
created() {
this.handleDebouncedScroll = debounce(this.handleScroll, 100)
window.addEventListener('scroll', this.handleDebouncedScroll)
},
beforeDestroy() {
window.removeEventListener('scroll', this.handleDebouncedScroll)
},
and methods:
handleScroll() {
this.minHeight = `calc(100vh + ${window.scrollY}px)`
},
it's all. link-footer is now always at the bottom of the screen
question from:
https://stackoverflow.com/questions/65858215/i-dont-understand-how-to-stick-the-last-of-the-link-on-the-sidebar-to-the-bott