CSS- position footer at the bottom of the page

Question

I am trying to position footer at the bottom of the page, but not sticky. I have a problem when there is not enough content to cover the screen height, then the footer is not at the bottom. I have tried to set it up in CSS like this:

body {
  position: relative;
  margin: 0;
  padding-bottom: 8rem;
  min-height: 100%;
  overflow-x: hidden;
}

footer {
  position: absolute;
  display: flex;
  align-items: center;
  height: 4rem;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: $gray;
}

With this footer is only at the bottom of the page when there is enough content on it. But, when there is not enough content then it is above the bottom. Here is the example:

Here is the fiddle.

When I add to the css file, like suggested in the answers:

html, body {
  height: 100%;
}

Then, I have a problem with pages where there is alot of content, then the footer is at the bottom on page load, but when I start to scroll down, it goes up with the content, like shown in the image:

please post the html code. And it would be best if you could create a fiddle. — Kristijan Iliev, May 05 '17 at 10:55

score 0 · Answer 1 · answered May 05 '17 at 10:56

0

Bydefault body take height as per inner content. Just add following CSS for this

html, body {
    height: 100%;
}

html, body {
  height: 100%;
}
body {
  position: relative;
  margin: 0;
  min-height: 100%;
  overflow-x: hidden;
}

footer {
  position: absolute;
  display: flex;
  align-items: center;
  height: 4rem;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: $gray;
  background: red;
}

<footer>Footer Container</footer>

answered May 05 '17 at 10:56

Super User

9,448
3
31
47

That works great when there is not enough content, which was the problem, but now on the pages with alot of content, the footer is at the bottom, but when I scroll down it is not at the bottom anymore. – Leff May 05 '17 at 11:04
Can you share your code – Super User May 05 '17 at 11:06
I have added fiddle to my question, where you can see the full code – Leff May 05 '17 at 11:07
it's coming in bottom after scroll, check again – Super User May 05 '17 at 11:09
not sure, what you mean, but I have posted an image of what is happening on the page with alot of content with this code – Leff May 05 '17 at 11:12

score 0 · Answer 2 · answered May 05 '17 at 11:08

0

This may be related to display property: Try to add this in your footer css:

display: block;

So that your footer css becomes:

footer {
  position: absolute;
  display: block;
  align-items: center;
  height: 4rem;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: $gray;
}

If you don't want to get rid of display: flex; then try to wrap it in any parent div and then apply the display property.

answered May 05 '17 at 11:08

Affirmative

1
3

Thanks for your suggestion, but that didn't help, unfortunately. – Leff May 05 '17 at 11:18
Then try position : fixed; try to use different combinations. – Affirmative May 05 '17 at 12:10

score 0 · Answer 3 · answered May 05 '17 at 11:32

0

Change position value to relative in footer css block.May be its because of absolute you are getting that problem. Correct me if I am wrong.

answered May 05 '17 at 11:32

Shashank

13
7

That is not it. – Leff May 05 '17 at 12:12
Please try this and let me know. It worked for me. Changes to be made position : absolute, width : 100%, bottom : 0px, left : 0px – Shashank May 11 '17 at 12:20

CSS- position footer at the bottom of the page

3 Answers3