html footer element is not positioning at the bottom?

Question

I want my footer to stick to the bottom of my page, but it is not displayed at the bottom. It goes to aside or to the top close to navigation or, if it`s displayed at the bottom of the page then its background gradient color applies to the upper div element as well.

I have tried the following code:

body::after {
    content: '';
    display: block;
    height: 90px;
}

#footerindex {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 90px;
}

Second code-

#footer {clear: both;
    position: relative;
    height: 40px;
    margin-top: -40px;

}

 <footer style="background: linear-gradient(to bottom, #4e54c8, #8f94fb)">
    <div id="footerindex">
      <a href="terms.html"> Terms and conditions </a> <a href="privacy.html" style="padding-left: 15px;">Privacy Policy</a> 
      <p>&#169; Copyright 2019 - jobg.xyz, All Rights Reserved. </p>
      <p>Website designed and developed by Riven Apwbihls</p>
    </div>
  </footer>

score 0 · Answer 1 · answered Mar 07 '19 at 12:08

You can use flexbox. For a quick informatic on flexbox click here.

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

nav {
  height: 50px;
  width: 100vw;
  background-color: green;
}

main {
  width: 100vw;
  flex: 1;
}

footer {
  height: 50px;
  width: 100vw;
  background-color: grey;
}

<body>
  <nav>
    Nav
  </nav>
  <main>
    Main
  </main>
  <footer>
    Footer
  </footer>
</body>

The flex: 1 sizes the main element to take up the remaining space.

score 0 · Answer 2 · answered Mar 07 '19 at 12:10

added your #footerindex css to footer

footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 90px;
}

body::after {
    content: '';
    display: block;
    height: 90px;
}

footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 90px;
}

#footer {clear: both;
    position: relative;
    height: 40px;
    margin-top: -40px;

}

<footer style="background: linear-gradient(to bottom, #4e54c8, #8f94fb)">
    <div id="footerindex">
      <a href="terms.html"> Terms and conditions </a> <a href="privacy.html" style="padding-left: 15px;">Privacy Policy</a> 
      <p>&#169; Copyright 2019 - jobg.xyz, All Rights Reserved. </p>
      <p>Website designed and developed by Riven Apwbihls</p>
    </div>
  </footer>

html footer element is not positioning at the bottom?

2 Answers2