Position Copyright Bar on the Bottom

[OmegaOrbitals]

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.

[savardo]

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

[OmegaOrbitals]

Link

Also please tell me what you think of the CSS

@savardo

[savardo]

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.

[OmegaOrbitals]

This happens @savardo

[savardo]

Change position: absolute; to position: fixed;.

[OmegaOrbitals]

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

[savardo]

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.

[OmegaOrbitals]

Doesn’t do anything.

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

[savardo]

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;
}

[OmegaOrbitals]

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

[savardo]

Add height: 100vh; to the body CSS.

[OmegaOrbitals]

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

[savardo]

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.