CODEWITHSUNDEEP
htmlcss
user6162130
user6162130

Reputation:

Keeping the footer on the bottom of the page?

I know this is a common issue but I just can't work this out. No matter how many combinations of settings I try, the footer won't stay on the bottom of the page. It will just sit under whatever else is above it.

body {
  margin: 0;
  background-color: #ACFAB7;
}

# container {
  margin: 0 auto;
  padding: 40px;
}

#header {
  z-index: 0;
  height: 78px;
  background-color: #2ecc71;
}

#footer {
  z-index: 2;
  height: 40px;
  width: 100%;
  padding: 0px;
  position: relative;
  background-color: #2ecc71;
  /*display required to center text*/
  display: table;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

#image {
  z-index: 1;
  margin: 20px auto;
  padding: 50px;
}

/*Centers text within the header*/
span {
  display: table-cell;
  vertical-align: middle;
}

Upvotes: 0

Views: 79

Answers (3)

pradeep1991singh
pradeep1991singh

Reputation: 8365

You can use position: fixed; bottom: 0;

#footer {
  z-index: 2;
  height: 40px;
  width: 100%;
  padding: 0px;
  background-color: #2ecc71;
  text-align: center;
  margin-left: auto;
  margin-right: auto;  
  position:fixed;
  bottom:0;
  left: 0;
}
<div>
  <footer id="footer">Footer</footer>
</div>

Upvotes: 0

Pugazh
Pugazh

Reputation: 9561

position: fixed; and bottom: 0; should do the trick. Add width and height as neccessary.

.footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 30px;
  background-color: aquamarine;
}
<div style="background-color: lightgrey;height: 800px">
  Page content
</div>
<div class="footer">
  this is the footer
</div>

Upvotes: 0

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167162

You have a lot of problems. This solution is for:

  • Fixing your footer at the end of the page.
  • Centering the contents (both vertically and horizontally).

Fixes

  • Get rid of display: table.
  • Get rid of width: 100%.
  • Change relative to fixed.

#footer {
  z-index: 2;
  line-height: 40px;
  padding: 0px;
  position: fixed;
  background-color: #2ecc71;
  text-align: center;
  left: 0; right: 0;
  bottom: 0;
}
<div id="footer">Copyrights.</div>

Upvotes: 1

Related Questions