footer is not at the bottom of the page

Question

i have a problem where my footer element is not at the bottom of the page while i browse the page over mobile this my html


<!DOCTYPE html>
<html>
    <head>
        <title>Ziad Alian</title>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="mystyle.css">
    </head>
    <body>
        <h4>Ziad Alian</h4>
        <img class="imgz" src="zCmakv5P_400x400.jpg"/></img>
        <ul>
            <li><a href="#aboutme">ABOUT ME</a></li>
            <li><a href="#">PROJECTS</a></li>
            <li><a href="#contact">CONTACT</a></li>
        </ul>
        <hr>
        <div>
            <p id="hello">Hello World! </p>
            <p id="aboutme">I'm Ziad Alian a 26 years old Software Developer. Born in the 331 BC ancient city of Alexandria, Egypt.<br/>
                 I studied Geomatics but I don't like it cause computer science is my passion.<br/> 
                 I'm a self taught web developer, My goal is to be a fucll stack developer using 
                HTML5, CSS, JavaScript, React, Python and Django.<br/>
                I love programming and everything that has to do with technology, the internet and writing code.
             </p>
        </div>
        <hr>
        <div id="contact">
            <ul>
                 <li><a href="https://github.com/ziaalian">GitHub</a> </li>   
                 <li><a href="https://www.linkedin.com/in/ziad-alian-24b1139b/">LinkedIn</a> </li>   
                 <li><a href="https://twitter.com/ziaalian">Twitter</a> </li>   
                 <li><a href="https://www.instagram.com/ziaalian/">Instagram</a> </li>   
            </ul>
            
        </div>
        <br>
        <footer>&copy; 2020 Ziad Alian</footer>
    </body>
</html>

And this is my CSS

this where my footer element been added


  footer {
      background-color: black;
      color: white;
     padding: 0.5em;
         
  }

Edit

i added this code

 body {
    background-color:whitesmoke;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    
}

h4 {
    text-align: center;
    font-size: 68px;
    font-weight: 80;
    color: teal;
    }
.imgz {
    width: 200px;
    border-radius: 50%;
    
    
    
}
#hello {
    text-align: center;
    font-size: 30px;
    color: teal;
    }

#aboutme {
    font-size: medium;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    
}


p {
    text-align: justify;
  }


      
  footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: black;
    color:white;
    padding: 0.5em;
    margin: 0;
    margin-top: auto;
      }

and it's now fixed like it's just go down and up with me while i scroll the page i just want it to stay at the bottom

mywebsite

It is at the bottom of your page, your page just doesn't have enough to push it down. You can find ways around this with CSS and a simple Google search — Andy Holmes, Dec 04 '20 at 19:09
this is my code https://github.com/ziaalian/my-portfolio.git — Ziad Alian, Dec 04 '20 at 19:11
Yep, not enough content. You can get around this with a simple google search for fixed footer or similar — Andy Holmes, Dec 04 '20 at 19:14
please don't post a link to your code. Post your code in a snippet on stackoverflow. That's what it's there for. You'll get more help and faster replies if you make it easy — DCR, Dec 04 '20 at 19:17
Does this answer your question? [How do you get the footer to stay at the bottom of a Web page?](https://stackoverflow.com/questions/42294/how-do-you-get-the-footer-to-stay-at-the-bottom-of-a-web-page) — Asif Sharif Shahid, Dec 04 '20 at 19:37
i tried ``` .footer { position: absolute; bottom: 0; width: 100%; background-color: black; color:white; padding: 0.5em; } ``` but it didn't help the footer became at the middle of the page — Ziad Alian, Dec 04 '20 at 19:41

Mikail B. · Answer 1 · 2020-12-05T10:17:28.893

1

You have not integrated some properties into the CSS-file.

You have not integrated the block of the element footer into the HTML-file.

New footer properties

footer {

   background-color: black;

   color: white;

   padding: 0.5em;

   position:fixed;

   left:0px;

   bottom:0px;

   height:30px;

   width:100%;

}

Old footer properties

footer {

   background-color: black;

   color: white;

   padding: 0.5em;

}

New footer

  <footer> &copy; 2020 Ziad Alian</footer>

These properties fix the object for the view of the user visiting the website, which means that the object is dynamic for the view of the user.

edited Dec 05 '20 at 10:17

answered Dec 04 '20 at 20:04

Mikail B.

225
5
11

can you look at the gif that i put on my question as edit please – Ziad Alian Dec 05 '20 at 03:15
Hello, in the source code I sent you, only the `footer` was fixed for the user perspective, but not for the content of the website. I am sending you a new, fully developed site, which also has a better structure of the source code. – Mikail B. Dec 05 '20 at 09:39
have a look on the website now i added your code and the footer is not fixed at the bottom of the page as i scroll up and down it's come with me http://ziaalian.com/ – Ziad Alian Dec 05 '20 at 10:01
I am sending you a new, fully developed site, which also has a better structure of the source code. – Mikail B. Dec 05 '20 at 10:03
i'm sorry but i'm new here so you already sent the code ? – Ziad Alian Dec 05 '20 at 10:06
I have now sent you a new answer with the newly developed source code. – Mikail B. Dec 05 '20 at 10:28
i copy paste your code and save it on may machine and it doesn't look like the GIF at all it's just include i picture at the center , body , list for the links and the footer is not there. so i'm sorry this not the right code i just need some one tell me what's wrong with my code ! – Ziad Alian Dec 08 '20 at 18:10
As I said before, you must use the new source code that is shown in the new answer. The source code you use is from my first answer, the new source code to fix the problem is included in the new answer. We are currently at the old answer. – Mikail B. Dec 09 '20 at 18:12

score 0 · Answer 2 · answered Dec 04 '20 at 20:29

0

You could also try giving the main section a min-height: 100vh so to push the footer down. See if that helps.

answered Dec 04 '20 at 20:29

Vincenzo

375
3
15

2

can you have a look at my post again please i just posted the full code – Ziad Alian Dec 05 '20 at 13:01

score 0 · Answer 3 · edited Dec 05 '20 at 01:22

0

Try using position: fixed to keep your footer pinned to the bottom of the viewport.

When using fixed positioning, you'll also want to be sure you set the left: 0 and width: 100% properties to make the footer the same width as the viewport.

footer {
  background-color: black;
  color: white;
  padding: 0.5em;
  position:fixed;
  bottom:0;
  left:0;
  width:100%
}

<footer>&copy; 2020 Ziad Alian</footer>

edited Dec 05 '20 at 01:22

simmer

2,639
1
18
22

answered Dec 04 '20 at 20:54

KarimovFarda

1
1

Please explain how your code works; never just post code on its own. – M-Chen-3 Dec 05 '20 at 00:05
can you have a look at my post again please i just posted the full code – Ziad Alian Dec 05 '20 at 13:00

Mikail B. · Answer 4 · 2020-12-05T11:47:47.800

I have developed a website for you with the same structure as your old website, but with only minor changes.

The source code now has a better structure.
Comments have been added to avoid losing track of the source code.

HTML

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-GB"><head>
    <title>2020 Ziad Alian</title>
    <link rel="stylesheet" href="style.css">
 </head>
 <body>
    <div id="container">
       <div id="header">
          <!-- Header start -->
          <h1>
             <center>2020 Ziad Alian</center>
          </h1>
          <!-- Header end -->
       </div>
       <div id="body">
          <!-- Body start -->
          <center>
             <img class="imgz" src="zCmakv5P_400x400.jpg"></img>
             <p>
                <a href="https://LinkToTheWebsite.com">
             <li> ABOUT ME</li></a></p>
             <p>
                <a href="https://LinkToTheWebsite.com">
             <li>PROJECTS</li></a></p>
             <p>
                <a href="https://LinkToTheWebsite.com">
             <li>CONTACT</li></a></p>
          </center>
          <hr>
          <p>
          <center style="font-size: 30px"> HELLO WORLD</style></center>
          </p>
          <center>
             <p><strong>I'm Ziad Alian a 26 years old Software Developer. Born in the 331 BC ancient city of Alexandria, Egypt.<br><br>
                I studied Geomatics but I don't like it cause computer science is my passion.<br><br>
                I'm a self taught web developer, My goal is to be a fucll stack developer using HTML5, CSS, JavaScript, React, Python and Django.<br><br>
                I love programming and everything that has to do with technology, the internet and writing code.</strong>
             </p>
          </center>
          <hr>
          <center>
             <p>
                <a href="https://LinkToTheWebsite.com">
             <li> GitHub</li></a></p>
             <p>
                <a href="https://LinkToTheWebsite.com">
             <li>LinkedIn</li></a></p>
             <p>
                <a href="https://LinkToTheWebsite.com">
             <li>Twitter</li></a></p>
             <p>
                <a href="https://LinkToTheWebsite.com">
             <li>Instagram</li></a></p>
          </center>
          <!-- Body end -->
       </div>
       <div id="footer">
          <!-- Footer start -->
          <center>
             <p><font color="#FFFFFF">&copy; 2020 Ziad Alian</font></p>
          </center>
          <!-- Footer end -->
       </div>
    </div>
 </body>
</html>

CSS

  html,
  body {
      margin:0;
      padding:0;
      height:100%;
  }
  #container {
      min-height:100%;
      position:relative;
  }
  #header {

      padding:10px;
  }
  #body {
      padding:10px;
      padding-bottom:60px;    
  }
  #footer {
      position:absolute;
      bottom:0;
      width:100%;
      height:60px;    
      background:#000000;
  }

  .imgz {
  border-radius: 50%;
  }

  #header p,
  #header h1 {
      margin:0;
      padding:10px 0 0 10px;
  }
  #footer p {
      margin:0;
      padding:10px;
  }

sorry bro but i downloaded your code and it didn't work the footer is not there and the image is squared i don't how to put gif in comment to show you the result — Ziad Alian, Dec 05 '20 at 11:14
Hello, I have now added the correct properties to the CSS file. — Mikail B., Dec 05 '20 at 11:49
Hello, you need to copy the HTML and CSS source code and paste it into any text editor. The file containing the HTML source code is labeled `Index.html` and the file containing the CSS source code is labeled `style.css`. Sorry for the later answer, I was working on a different topic. — Mikail B., Dec 05 '20 at 16:39
yeah i did that and it didn't work can you copy and paste my code that i just posted it again in my post and tell me whey footer is going up and down with me when i'm scrolling the page, please ! — Ziad Alian, Dec 05 '20 at 18:09
Take a look at the HTML and CSS source code you will find in this answer. — Mikail B., Dec 05 '20 at 18:20
right now my problem is that footer on hover and on scroll can you help me with that please? i added all my of my code on the post! — Ziad Alian, Dec 05 '20 at 22:51
As I said, you must use the new source code that is shown in this answer. The source code you are using was from my first answer, the new source code to fix the problem is in this answer. — Mikail B., Dec 06 '20 at 08:02

footer is not at the bottom of the page

4 Answers4