<li> in the bottom of sidebar

November 28, 2021

Hello, how I can put the "Déconnexion" element at the bottom of the sidebar, whatever the screen size of the user.

My code looks like that :

<div class="sidebar">
  <div class="profil">
    <div class="photo-profil">
      <img src="img/users_pdp/zenitsu.jpg" alt="photo-profil">
    </div>
    <div class="nom">
      <span>User</span>
    </div>
  </div>
  <ul class="nav-links">
    <li><a href="#">Ma liste</a></li>
    <li class="genres-li"><a>Genres <span class="arrow_carrot-down"></span></a>
    </li>
    <li><a href="./categories.php?categorie=film">Films</a></li>
    <li><a href="./categories.php?categorie=serie">Séries</a></li>
    <li><a href="./categories.php?categorie=anime">Animes</a></li>
    <li><a href="#">Mon compte</a></li>
    <li class="sign-out"><a href="#"><i class="fa fa-sign-out" aria-hidden="true"></i> Déconnexion</a></li>
  </ul>
</div>

>Solution :

Looking from your image, it looks like you have absolute position for your sidebar.

Since you need the nav-list to take up entirety of the available space, you can make use of flex.

Make your sidebar as a display:flex, with flex-direction: column to retain the layout.
add flex: 1 to your nav-links to make it use of available space.
Change display property of nav-links to flex and direction as column
Add margin-top: auto to your sign-out to move it to the bottom.

Here is a working codepen example.