HTML and CSS how to make footer stay at bottom of page?

Question

I have a footer at the bottom of my page. When there is enough content the footer is pushed of the page until you scroll down where it becomes visible. This is good but when there is not enough content on the page the footer is visible without scrolling somewhere on the page but it is not at the bottom where it should be. How can I make my footer be at the bottom of the page when there is not enough content? Here is my code:

    <html>
<head>
   <title>Omicrome</title>
   //stuff
</head>
<body>
  <div class = "container_24">
     <header>
        //stuff     
    </header>
        //stuff
  </div>
</body>
    <div id = "rectangle">
      <center>
        <a href="about" id = "footerbtn2">About</a> 
        <a href="privacy_policy.php" id = "footerbtn1">Privacy Policy</a>
        <a href="about" id = "footerbtn4">Contact</a>
      </center>
      <center><div id = "footerborder"></div></center>
    </div>
</html>

My css:

body{
     background-image: url("../img/bg.jpg");
     background-repeat: repeat;

}
header{
    overflow: hidden;

}
.container_24{

    margin-left: auto;
    margin-right: auto;


}
#rectangle {
    float:bottom;
    position: relative;
    width: 100%;
    height: 40px;
    padding-top: 15px;
    padding-bottom: 10px;
    background: #404040;
    top: 50%;

}

This is a very common question. Try googling your questions before posting. — marcusshep, Nov 09 '16 at 19:42

score 0 · Answer 1 · answered Nov 09 '16 at 19:40

0

body {
position: relative;
}

#footerborder {
position: absolute;
bottom: 0;
}

Take a look at css positioning! Good Basic Explaination here.

answered Nov 09 '16 at 19:40

topada

46
4

That does not work because the footer is there at the bottom and when you scroll it stays at scrolls past. Also I want the footer to be off at the bottom of the page even when there is so much content that you have to scroll down to the very bottom. The border should be at the very bottom. – user7133318 Nov 09 '16 at 19:49

score 0 · Answer 2 · answered Nov 09 '16 at 19:44

Change the position from relative to absolute and also remove top:50%;

body{
     background-image: url("../img/bg.jpg");
     background-repeat: repeat;

}
header{
    overflow: hidden;

}
.container_24{

    margin-left: auto;
    margin-right: auto;


}
#rectangle {
    float:bottom;    
    width: 100%;
    height: 40px;
    padding-top: 15px;
    //padding-bottom: 10px;
    background: #404040;
    position: absolute;
    bottom: 0px; 
}

<div id = "rectangle">
      <center>
        <a href="about" id = "footerbtn2">About</a> 
        <a href="privacy_policy.php" id = "footerbtn1">Privacy Policy</a>
        <a href="about" id = "footerbtn4">Contact</a>
      </center>
      <center><div id = "footerborder"></div></center>
    </div>

HTML and CSS how to make footer stay at bottom of page?

2 Answers2