Question 252725 in Html Question posted in
Some basic documentation can be found here.

Html – Footer won't stay at the bottom

I’m working on updating an old project I did in a course. We had to use handlebars for the project and the footer is giving me issues. If I don’t put a position on it, it will stay at the bottom of the page with longer content but it’s in the middle of the page for the rest of the pages with shorter content. If I put position: absolute and bottom: 0, the problem flips and it’s in the middle of the page on the longer content page but at the bottom on the shorter content pages.

I have min-height: 100vh on the body

Here is the footer.handlebars:

<footer class='footer footer-center p-5'>
 <div class='grid grid-flow-col'>
  <a class='link link-hover text about-us-footer' a href='/aboutus'>About Us</a>
 </div> 
 <div>
   <div class='grid grid-flow-col github'>
     <a href='https://github.com/caitlinramsey/borrowhood-cr'  target='_blank'><i class='fa fa-                                                  github' style='font-size:50px; color:black;'></i></a>
   </div>
 </div> 
 <div>
   <p class='text copyright'>Copyright © 2023 - All right reserved by Borrowhood</p>
 </div>
</footer>

Here is the current CSS though I’ve tried multiple things:

footer {
  background-color: var(--secondary);
  height: 250px;
  position: absolute;
  bottom: 0;
}

Any help is greatly appreciated!

I want the footer to be at the bottom of the page no matter the length of the page.

Tags:

2

Answers


  1. 0

    You can change your position to fixed so that it will be bottom at any page height and remove height if it not necessary so that there won’t be any extra space.

    footer {
  background-color: var(--secondary);
  height: 250px;
  position: absolute;
  bottom: 0;
}
    Login or Signup to reply.
  2. 0 
    <!doctype html>
<html>
    <head>
        <title></title>
        <style>
html, 
body {
    margin: 0;
    padding: 0;
    height: 100%;
}
#wrapper {
    position: relative;
    min-height: 100%;
}
#header, 
#footer {
    height: 50px;
    background: navy;
}
#footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}
#content {
    padding-bottom: 50px;
}
        </style>
    </head>
    <body>
        <div id="wrapper">
            <div id="header"></div>
            <div id="content"></div>
            <div id="footer"></div>
        </div>
    </body>
</html>

    One should keep in mind, however, that websites aren’t pieces of paper, and shouldn’t really have footers. We have hyperlinks — just use those.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search