Having trouble creating a sticky navigation bar at the very bottom of the responsive website

I created a navigation bar below the image to display icons for various social media platforms. However, I am trying to place these icons at the very bottom of the website and make it responsive depending on the size of the screen (PC & mobile).

I have tried placing the position: 'sticky' from 'absolute' and placed the 'index = -999', but it doesn't seem to be working fine.

This is what I have:

HTML

 <div class ="bottom">
        <div class = "logos">
            <a href="https://github.com/j-ahn94" target="_blank" class="fa fa-github"></a>
            <a href="https://stackoverflow.com/users/14266888/jason-a" target="_blank" class="fa fa-stack-overflow"></a>
            <a href="https://www.linkedin.com/in/jasonja-ahn/" target="_blank" class="fa fa-linkedin"></a>
        </div>
    </div>

CSS

/*Adding body and * as it might be relevant to my problem*/

body {
    background-color: black; /*rgb(241, 233, 233);*/
    display: flex;
    flex-direction: column;
    
}

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

.logos {
    background-color: black;
    overflow: hidden;
    position: sticky;
    bottom: 0;
    width: 100%;
    z-index: -999;
}

.logos a {
    background-color: black;
    float: left;
    display: block;
    color: white;
    text-align: center;
    padding: 14px;
    text-decoration: none;
    font-size: 17px;
    position: sticky;
}

Solution

First of all, your body is missing the height attribute. It does not reach the bottom, so you will have to give it a height. The vh should do the trick. (100vh). This meaning that your document will always have at least the height of the device that it is accessing it.

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

body {
    background-color: black; /*rgb(241, 233, 233);*/
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.bottom {
   margin-top: auto;
}
.logos {
  display: flex;
   flex-direction: row;
}
.logos a {
    color: white;
    text-align: center;
    padding: 14px;
    text-decoration: none;
    font-size: 17px;
}

<body>
    <div class="bottom">
      <div class = "logos">
        <a href="https://github.com/j-ahn94" target="_blank" class="fa fa-github">Text 1</a>
        <a href="https://stackoverflow.com/users/14266888/jason-a" target="_blank" class="fa fa-stack-overflow">Text 2</a>
        <a href="https://www.linkedin.com/in/jasonja-ahn/" target="_blank" class="fa fa-linkedin">Text 3</a>
      </div>
  </div>
</body>