How to stop footer from mooving when scroll page?

Question

I am learning HTML and have question about layout. I'm trying to make a normal page footer. I mean, it should be on the bottom of page and not moving when the page is scrolled on mobile devices. Text should be placed in the center of the footer.

I tried to solve it with position: fixed property, but it doesn't help.

Need some help, please.

My page looks like this:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Lorem ipsum</title>
  <link rel="stylesheet" type="text/css" href="/download/a/www/css/style_about.css">
</head>

<body>
  <div id="wrap">
    <div id="cont">
      <h1> Lorem </h1>
      <p> "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
      </p>
      <h3> Credits</h3>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod <br> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod </p>
    </div>
  </div>
  <div class="credits">
    <p>Lorem ipsum dolor sit amet <a href="">Lorem</a> Lorem ipsum dolor sit amet</p>
    <p>Lorem ipsum dolor sit amet <a href="">Lorem</a> Lorem ipsum dolor sit amet</p>
    <p>Lorem ipsum dolor sit amet <a href="">Lorem</a> Lorem ipsum dolor sit amet</p>
    <p>Lorem ipsum dolor sit amet <a href="">Lorem</a> Lorem ipsum dolor sit amet</p>
    <p>Lorem ipsum dolor sit amet <a href="">Lorem</a> Lorem ipsum dolor sit amet</p>
    <p>Lorem ipsum dolor sit amet <a href="">Lorem</a> Lorem ipsum dolor sit amet</p>
    <p>Lorem ipsum dolor sit amet <a href="">Lorem</a> Lorem ipsum dolor sit amet</p>
    <p>Lorem ipsum dolor sit amet <a href="">Lorem</a> Lorem ipsum dolor sit amet</p>
  </div>
  <br>
  <?php include(realpath(__DIR__) . '/footer-confident.php'); ?>
</body>

</html>

Styles and html layout I show in Codepen: https://codepen.io/h071/pen/rZoMbr

`position:fixed;` keeps the element "attached" to scroller, you should use `position:absolute` in order to keep it from following with scroller — Feelsbadman, Sep 19 '18 at 11:33
@IdontReallywolf just changed to `absolute`, did nothing more. Footer is now appearing on some distance from page top. Should I do smth more? — aysee, Sep 19 '18 at 11:36
Try see https://css-tricks.com/couple-takes-sticky-footer/ and https://stackoverflow.com/questions/42294/how-do-you-get-the-footer-to-stay-at-the-bottom-of-a-web-page . There are quite a few ways to sticky a footer to the bottom of a page. — Martin, Sep 19 '18 at 11:38
Fix and set the position : `position: absolute; bottom: 0px; left: 0px;` — Seblor, Sep 19 '18 at 11:40
btw, you've missed `}` before closing the `@media` rules for `.credits` — Feelsbadman, Sep 19 '18 at 11:44
@Seblor did it. Footer now became sticked to the bottom of the page. But there are 2 problems: 1. `text-align: center` doesn't help centrifying footers's text now, 2. In mobile devices footer is floating on the center of page before page's content. Added just the same rules for `.footer` in media query `@media screen and (max-width: 600px) { .footer { position: absolute; bottom: 0px; left: 0px; text-align: center; } }` — aysee, Sep 19 '18 at 11:49
@aysee The footer is not centered because the div is croped to the inner element's size. You need to make it match the page's width. Add this rule : `right: 0px;` — Seblor, Sep 19 '18 at 11:54

score 1 · Answer 1 · answered Sep 19 '18 at 11:56

1

I think what you are looking for is position: sticky on your footer for mobile devices.

body {
  margin: 0;
}

div {
  width: 100vw;
  min-height: 100vh;
  background: #c0ffee;
}

footer {
  width: 100vw;
  position: sticky;
  bottom: 0;
  text-align: center;
  background: #bada55;
}

<div class="content"></div>
<footer>Hi</footer>

answered Sep 19 '18 at 11:56

Andifined

479
6
19

1

Keep in mind that `position: sticky` is not supported by IE. *edit :* And it seems Safari needs the prefix `-webkit-` to make it work. – Seblor Sep 19 '18 at 11:57
1

@Seblor correct, although it shouldn't matter when on a mobile device and if not supported, it just falls back to static which is also okay in most cases. – Andifined Sep 19 '18 at 12:00
@Andifined excuse me, I've tryed correcting my styles according to your answer. A bit confused. May you look in my updated styles and tell me what did I do wrong? – aysee Sep 19 '18 at 12:11
Your wrap element has a width of 100vw and margin. Since the margin is added you get a scroll bar, if that is what you are referring to. Also you only really need `position: sticky` and `bottom: 0`, the rest was for showcase only :) – Andifined Sep 19 '18 at 12:18
@Andifined don't understand. `body` element's margin is set to 0. `wrap` element's margin is left and right (need this margins). Keeping in mind this what should I do to solve my problem which is: a) make footer static and sticky on the bottom and b) keep this property in small screens. Now unfortunately it isn't.. – aysee Sep 19 '18 at 13:53
@aysee Your pen works for me... The footer stays in the viewport no matter on which screen size. Which browser are you using? Please check for your browser support on `position:sticky`: https://caniuse.com/#feat=css-sticky – Andifined Sep 19 '18 at 14:09
@Andifined, sorry for my bad English. I think, I couldn't explain my task clearly. I need footer to be at the bottom of the page...for example as it is in here in SO site - https://stackoverflow.com/ ...And I need this property to be both on destops and mobiles :) – aysee Sep 19 '18 at 14:25
I use Chrome v.69, but I try to find solution which is good enough for most common cases for Internet users – aysee Sep 19 '18 at 14:27
@aysee Check out my new answer, I hope it helps you :) – Andifined Sep 19 '18 at 14:49

score 0 · Accepted Answer · answered Sep 19 '18 at 14:48

Added this to a new answer to not confuse other users.

If you want the footer at the bottom, regardless the content length (I hope this is what you want), you can do the following. The main content will always grow to fill at least the viewport height and push the footer to the bottom.

To test this out, you can change the min-height on the body to 200vh or something and it should push the footer further down.

If this is also not what you are trying to accomplish, I have no idea what you want, sorry...

body {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-height: 100vh;
  margin: 0;
}

main {
  flex-grow: 1;
  background: #c0ffee;
}

footer {
  flex-shrink: 0;
  text-align: center;
  background: #bada55;
}

<main class="content"></main>
<footer>Hi</footer>

score -1 · Answer 3 · answered Sep 19 '18 at 13:06

you can try it with flexbox. make the page display: flex and the main content flex: 1, it forces the content to grow and take up the maximum allowable size. the footer can then have an assigned static height if you want, or its contents will determine its height.

It would look something like this:

.wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.content {
  flex: 1;
  overflow-y: scroll;
}

codepen example

How to stop footer from mooving when scroll page?

3 Answers3