Sticky Position with bottom : 0 is not working

Question

This is simple HTML CSS script , just designing one page , i want to put bottom class at the bottom of container class. I tried giving height to container class but still sticky property not working.

@import url('https://fonts.googleapis.com/css2?family=Ubuntu&family=Varela+Round&display=swap');
body {
  background-color: antiquewhite;
}

* {
  margin: 0;
  padding: 0;
}

nav {
  font-family: 'Ubuntu', sans-serif;
}

nav ul {
  display: flex;
  list-style-type: none;
  height: 65px;
  background-color: black;
  color: white;
  align-items: center;
}

.brand img {
  width: 44px;
  padding: 0 8px;
}

.brand {
  display: flex;
  align-items: center;
  font-weight: bold;
  font-size: 1.3rem;
}

nav li {
  padding: 0 12px;
}

.container {
  min-height: 100vh;
  border: 5px solid red;
  position: relative;
}

.bottom {
  border: 2px solid green;
  position: sticky;
  height: 130px;
  background-color: black;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

#myProgressBar {
  width: 80vw;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Spotify</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>

  <nav>
    <ul>
      <li class="brand"><img src="logo.png" alt="Spotify"><span>Spotify</span></li>
      <li>Home </li>
      <li>about</li>
      <li> </li>
    </ul>
  </nav>

  <div class="container">
    <h1>Best of NCS - No Copyright Sounds</h1>


    <div class="songList"></div>

    <div class="songBanner"></div>

    <div class="bottom">
      <input type="range" name="range" id="myProgressBar" min="0" max="100">
      <div class="icons">
        <!--fontawesome Icons-->
        <i class="fa-solid fa-play"></i>
      </div>
    </div>





  </div>
  <script src="script.js"></script>
  <script src="https://kit.fontawesome.com/f6f6daec14.js" crossorigin="anonymous"></script>
</body>

</html>

Try `position: fixed` or `position: absolute` instead of `sticky` — Richa, Jul 04 '22 at 06:06

score 0 · Answer 1 · answered Jul 04 '22 at 06:11

The position: sticky does not do what you think it does. It will make the element stick to the header when you scroll down.

You can use either flexbox or grid to make the element stick to the bottom.

For example, have a look here:

flexbox: https://dev.to/nehalahmadkhan/how-to-make-footer-stick-to-bottom-of-web-page-3i14

grid: Footer at bottom with css grid? Can't figure it out?

Just be aware, that on some older phones the 100vh may be an issue - due to the extra header-spacing that is not calculated.

position sticky does not work on IE11, if you have to support that.

Sticky Position with bottom : 0 is not working

1 Answers1