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

Html – How to position footer to always be at the bottom of the page?

I want my footer to be at the bottom of the page, even when there are not enough elements on the page to push it down. I tried position: fixed with a bottom: 0 but that makes it stay there when there are elements filling the page.

How can I make the footer be at the bottom of all the elements when the page is full and at the bottom of the screen when the page is not?

Tags:

2

Answers


  1. 0

    make a div between your nav and footer and then set the height of div to 100vh or screen so it work.

    CSS

    .main-content {
  height: 100vh;
 }

    HTML

    <nav></nav>
<div class="main-content">
 <h1>Welcome to my website!</h1>
 <p>This is some sample content.</p>
 </div>
<footer></footer>

    "100vh" is the full height of screen

    Login or Signup to reply.
  2. 0

    You can make clone as placeholder
    like:

       <footer>
      <div class="plaholder"></div>
      <div class="onscreenfooter"></div>
   </footer>

    <style>
    .plaholder
    {
        width: 100%;
        // height fixed by js
    }
    .onscreenfooter
    {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
    }
    </style>

    Make onscreenfooter fixed position

    and copy its height to placeholder

    clientHeight includes padding.

        var clientHeight = document.querySelector('.onscreenfooter').clientHeight;
    document.querySelector('.plaholder').style.height = clientHeight;

    or

    offsetHeight includes padding, scrollBar and borders.

        var offsetHeight = document.querySelector('.onscreenfooter').offsetHeight;
    document.querySelector('.plaholder').style.height = offsetHeight;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search