html - i don't understand, how to stick the last of the link on the sidebar to the bottom?

Question

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

Answer 1

Try to use the justify-content proprierty.

In the general, this propierty controls the spacing of the elements. So, basicly you need to agroup the Link One and Link Two in a div and in the father div, use a justify-content: space-between;.

.father {
  display: flex;
  height: 200px;
  flex-direction: column;
  border: 1px solid black;
  
  justify-content: space-between;
}

<div class="father">
  <div class="header">
    <p>Content 1</p>
    <p>Content 2</p>
    <div>
      Another Content
    </div>
  </div>
  
  <div class="footer">
    Last content
  </div>
</div>