Fix last element of the list unordered in footer

Question

The HTML displays a menu with minimum height, is it possible to keep the last item aligned in the footer of the menu in a fixed mode? I put 5 items before "all" but it is possible that there is less to be generated by the bank, but the last could be fixed in the footer.

ul.lista {
  height: 200px;
}

ul.lista li,
ul.lista li a {
  list-style: none;
  list-style-image: none;
  list-style-type: none;
}

ul.lista li a {
  padding: 2px 2px;
  border-bottom: 1px solid #AFAFAF;
}

ul.lista li a:last-child {
  border-bottom: 0px;
}

<ul class="lista">
  <li><a href="">Link#01</a></li>
  <li><a href="">Link#02</a></li>
  <li><a href="">Link#03</a></li>
  <li><a href="">Link#04</a></li>
  <li><a href="">Link#05</a></li>
  <li><a href="">Todos</a></li>
</ul>

Example of how I view the menu:

Answer 1

What you need to "fix" is the last <li> of the list, not the last <a>. That’s because the <a> is the son of <li> and is not exactly on the list. You should also apply the other properties to <li>, and not us <a>. For example, here:

ul.lista li,
ul.lista li a {
  list-style: none;
  list-style-image: none;
  list-style-type: none;
}

You are resetting properties of <a> that do not exist.

It should just be:

ul.lista li{
  list-style: none;
  list-style-image: none;
  list-style-type: none;
}

In this passage also:

ul.lista li a {
  padding: 2px 2px;
  border-bottom: 1px solid #AFAFAF;
}

If you want to make a vertical menu with using list, who should have these edge properties and internal spacing were the <li>, and not the <a>. Would look like this:

ul.lista li{
  padding: 2px 2px;
  border-bottom: 1px solid #AFAFAF;
}

And finally, to fix the last <li>, as reported in the other reply, you should also apply the properties in the last <li> :last-child, and not a:last-child, because otherwise it will apply to all <a> of the list, because all the <a> sane :last-child. Would look like this:

ul.lista li:last-child {
  border-bottom: 0px;
  position: absolute;
  left: 0;
  bottom: 0;
}

Example:

ul.lista {
  height: 200px;
  background: gray;
  position: relative;
}
ul.lista li{
  list-style: none;
  list-style-image: none;
  list-style-type: none;
}
ul.lista li{
  padding: 2px 2px;
  border-bottom: 1px solid #AFAFAF;
}
ul.lista li:last-child {
  border-bottom: 0px;
  position: absolute;
  left: 0;
  bottom: 0;
}

<ul class="lista">
    <li><a href="">Link#01</a></li>
    <li><a href="">Link#02</a></li>
    <li><a href="">Link#03</a></li>
    <li><a href="">Link#04</a></li>
    <li><a href="">Link#05</a></li>
    <li><a href="">Todos</a></li>
</ul>

Answer 2

You can use the value fixed of property position:

ul.lista li a:last-hcild{
     position: fixed;
     bottom: 0;
     right: 0;
     border-bottom: 0px;
}

This property causes the element to be fixed to the screen, so it is not part of the page flow.

If the element is part of the page flow, it is best to use the position: absolute.

The value absolute needs another element on the page that serves as a reference, where you put the value relative.

ul.lista {
     position: relative;
     height: 200px;
}

ul.lista li a:last-hcild{
     position: absolute;
     bottom: 0;
     right: 0;
     border-bottom: 0px;
 }

The ul.lista serve as a reference point for ul.lista li a:last-hcild. This way the element will be inside the menu structure, and you can define where it will be positioned.