Position Copyright Bar on the Bottom

How do I position the copyright bar on the bottom? position: absolute; bottom: 0; works, but when it’s overflowing, it doesn’t work. margin-top: auto doesn’t work for some reason.

Could you send a link to your Repl? I tried using the CSS code and it worked fine.

1 Like


Also please tell me what you think of the CSS :smiley:


1 Like

Putting position: absolute; bottom: 0;, like what you have mentioned, in the footer’s CSS should still fix it to the bottom of the screen even if it overflows.

This happens @savardo

Change position: absolute; to position: fixed;.

I don’t want it fixed. If you scroll down to the bottom, you should it.

Okay found a solution:

Remove the position: fixed; bottom: 0; part from the footer CSS and add display: flex; flex-direction: column; to the body CSS.

1 Like

Doesn’t do anything.

I tried setting margin-top to auto, but it still doesn’t do anything.

It works on my end.

I will give the full body and footer CSS if you need them:

body {
  height: 100%;
  width: 100%;
  margin: 0;
  margin-top: 1.25vmax;
  padding: 0;
  overflow-x: hidden;
  background-color: var(--bg-color);
  display: flex;
  flex-direction: column;

footer {
  height: fit-content;
  width: 100vw;
  background-color: var(--main-element-bg-color);
  padding: 2.25vh 5vw;
  margin: 0;
  margin-top: auto;

It’ll work if the content overflows. But when it doesn’t overflow…

Add height: 100vh; to the body CSS.

1 Like

That solution worked. But there’s a small gap between the bottom and the footer.

Set bottom: 0; in the footer CSS.
Also if the body overflows, the height will be stuck to 100vh, so change the height CSS to min-height.

1 Like

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.