how do i get the footer to stay at the very bottom? css-CodePudding

The footer will be at the bottom perminently visible and not just when you get to the very bottom of the page like i want. can anyone help. Thanks

    <footer>
        <div >
            <ul >
                <li>ex</li>
                <li>Contact on:</li>
                <li>[email protected]</li>
            </ul>
        </div>
    </footer> 
    


    .footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: auto;
    background-color: #3E8DA8;
    text-align: center;
    
}

.footer-info li {
    color: white;
    list-style-type: none;
}

CodePudding user response：

Give the footer class to the actual footer tag, not the div inside,

 <footer >
      <ul >
        <li>ex</li>
        <li>Contact on:</li>
        <li>[email protected]</li>
      </ul>
    </footer>

CodePudding user response：

add bottom: 0;:

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

footer{
  bottom: 0;
  position: fixed;
  width: 100%;
  background: #3E8DA8;
  clear: both;
  text-align: center;
} 

.footer-info li {
    color: white;
    list-style-type: none;
}

<footer>
  <div >
    <ul >
      <li>ex</li>
      <li>Contact on:</li>
      <li>[email protected]</li>
    </ul>
  </div>
</footer>

my advice to you is to learn all the basics ASAP