CODEWITHSUNDEEP
htmlcssalignmentfooter
Rogustus
Rogustus

Reputation: 63

How can I make my footer align to the very bottom?

I'm new with CSS and have looked up many ways, but can't get the footer to align to the bottom. Any help? Thank you.

.footer {
    position: bottom;
    bottom: -10px;
    height: 30px;
    width: 100%;
    background-color: #171717;
    color: white;
}

Upvotes: 6

Views: 18035

Answers (4)

Shahjehan Ali Chughtai
Shahjehan Ali Chughtai

Reputation: 1

Demo on Codepen

HTML:

<div class="header">
  <h2>header</h2>
</div>
<div class="container">
  <h2>container</h2>
</div>
<div class="footer">
  <h2>footer</h2>
</div>

CSS:

body {
  height: 100%;
  width: 100%;
  display: table;
}
html {
  height: 100%;
}
.header {
  background: #f00;
  color:#fff;
  text-align: center;
}
.container {
  text-align: center;
}
.footer {
  background: #ff0;
  text-align: center;
  width: 100%;
  display: table-footer-group;
}

Upvotes: 0

Alfred
Alfred

Reputation: 21386

Try something like;

#footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 30px;
    background-color: #171717;
    color: white;
}

Here is a working Live Demo.

Upvotes: 2

Mutu Yolbulan
Mutu Yolbulan

Reputation: 1052

I would also add the left property in case there are other divs and such that can push the footer

.footer {
    position:absolute;
    bottom:0px;
    left: 0px;
    height:30px;
    width:100%;
    background-color:#171717;
    color:white;
}

Upvotes: 1

CoreyRS
CoreyRS

Reputation: 2267

Change position to fixed.

.footer {
    position:fixed;
    bottom:0px;
    height:30px;
    width:100%;
    background-color:#171717;
    color:white;
}

Upvotes: 11

Related Questions