How can I keep footer in bottom responsively

Question

I succeeded in putting footer on the bottom of the page but when I resize the screen to fit a phone especially when there is scrolling in page the footer goes up !

<footer className="footerContainer">
      <div className="footerText">© 2019 Designed and Programmed by Othman El houfi</div>
</footer>

footer {

  position:absolute;
  bottom:0;
  left: 50%;
  transform: translateX(-50%);
  word-wrap: break-word;

  .footerText {
    text-align: center;
    color: rgba(0, 0, 0, 0.58);
    font-style: italic;
    font-size: 10px;
  }
}

try swithcing the position from `absolute` to `fixed` like this: `position:fixed;` — Alexis Pavlidis, Nov 14 '19 at 17:39
Do you wrap your footer in some other element? Maybe its behavior is overriden by other css — Alexis Pavlidis, Nov 14 '19 at 17:42
Duplicate of https://stackoverflow.com/questions/18469262/position-footer-at-bottom-of-page-having-fixed-header. Also https://stackoverflow.com/search?q=footer+at+bottom+ — Rob, Nov 14 '19 at 17:43
@AlexisPavlidis No, the footer it's not inside of any other element. — Othman El houfi, Nov 14 '19 at 17:45
You might try these excellent options: https://css-tricks.com/couple-takes-sticky-footer/ — dns, Nov 14 '19 at 18:10

score 0 · Answer 1 · answered Nov 14 '19 at 17:44

0

Wrap your footer in a div with min-height: 100vh.

answered Nov 14 '19 at 17:44

Diogo Capela

5,669
5
24
35

It's putting a huge gap between the top level elements, a long scroll to bottom just to see the footer ! – Othman El houfi Nov 14 '19 at 17:48
For the footer to be `position: absolute` and to always be on the bottom of the page, you need to have its wrapper element have something like `min-height: 100vh`. Or else if there is not enough content the footer will appear on top. You can always use `position: fixed`, but I'm not sure if that's what you are looking for... – Diogo Capela Nov 14 '19 at 17:50
Maybe you can try adding submitting your code to https://codepen.io or to https://codesandbox.io and share it here. That way it would be easier to help you. – Diogo Capela Nov 14 '19 at 17:59
Here is a peace of code : https://codepen.io/othmanchawi/pen/NWWOeRj – Othman El houfi Nov 14 '19 at 18:13
Try resizing the output window and you will see the issue – Othman El houfi Nov 14 '19 at 18:14

score 0 · Answer 2 · answered Nov 14 '19 at 18:06

0

Wrap your content in a div with min-height: 100vh; Right now your footer is being positioned based on the body, and the body is only as big as its content.

The top, right, bottom, and left properties specify offsets from the edges of the element's containing block. (The containing block is the ancestor relative to which the element is positioned.)

css positioning

The absolute positioned item is positioned based on its positioned ancestor and static does not count as positioned. In this, it looks like the footer's nearest ancestor would be the body so you need to set the position of the body, even if it's just:

body {
  position: relative;
}

answered Nov 14 '19 at 18:06

Katie N.

41
7

Here is a peace of code, Try resizing the output window and you will see the issue : https://codepen.io/othmanchawi/pen/NWWOeRj – Othman El houfi Nov 14 '19 at 18:32
@OthmanElhoufi Make a ```var footerHeight``` and set it equal to the height you want the footer. Then set the footer's height equal to the variable footerHeight. Then change the ```min-height: 100vh;``` to ```min-height: calc(100vh - var(footerHeight))``` You would do the same if you had a header or any other elements besides the actual content. Ex. calc(100vh - var(footerHeight) - var(headerHeight)) – Katie N. Nov 14 '19 at 18:43

score 0 · Accepted Answer · answered Nov 14 '19 at 19:00

If you want to have responsive footer , you can use media queries and when screen size is smaller than 768 px (e.g tablet) , you should set your footer position from abosolute, to relative. this will fix your problem.

footer {
  position: relative;
}

@media only screen and (min-width: 768px) {
  footer {
    position: absolute;
    bottom:0;
  }
}

But I will suggest if you want to use footer on bottom, set its position to fixed :

position: fixed;
bottom: 0;
left: 0;

Of course in screens bigger than mobile resolutions

How can I keep footer in bottom responsively

3 Answers3