//CSS

footer {
    position: relative;
    height: 300px;
   width: 100%;
  }
p.copyright {
    position: absolute;
    width: 100%;
   line-height: 10px;
   text-align: center;
    bottom:0;
}

//HTML

<footer>
  <p >&copy Copyright 2022</p>
</footer>

My issue is the copyright logo is making my single page into more length, i presume due to the height of the footer - however whenever i reduce this its throwing the copyright into the middle of the page with a section blank underneath. How do i get my copyright to stay on the bottom middle no matter the page size?

CodePudding user response：

remove the position relative and absolute

footer {
    height: 300px;
   width: 100%;
  }
p.copyright {
    width: 100%;
   line-height: 10px;
   text-align: center;
    bottom:0;
}

CodePudding user response：

Display flex to center, remove height add another div which will position paragraph on bottom

CSS:

    footer {
      display: flex;
      justify-content: center;
      margin-top: auto;
    }
    p.copyright {
      margin: 10px;
    }
    body{
      min-height: 100vh; 
      display: flex; 
      flex-direction: column;
      margin: 0;
    }

As for html side

  <footer>
    <p >&copy Copyright 2022</p>
  </footer>

Updated