Footer goes on top and I want it at the bottom

Question

I'm trying to setting up a template HTML / CSS / Javascript.

As you can see if the page is full, like this it works more or less good.

But if the page doesn't fills all the screen like this the footer goes up.

If you don't have a good big screen resolution you don't see that. In this case push CTRL & minus to see the problem (or CMD & minus on MacOs).

I love it and I want to use just that template.

I've tried also something that

footer {
  position: fixed;
}

but the footer had to follow the last section.

It's possible to set it to stay at the end of the page maintaining the same layout?

P.S. I prefer to do it only with CSS without using JS, because some browsers can't have it.

Thank U

score 1 · Answer 1 · answered Mar 28 '20 at 02:07

1

Try adding

bottom: 0

This should set the bottom edge of the element to the bottom edge of the parent element.

answered Mar 28 '20 at 02:07

natalie

Natalie why talking without trying. I give you the code.. I can't vote down, but you deserve this. – Mar 28 '20 at 04:02

score 0 · Answer 2 · answered Mar 28 '20 at 02:36

There are several techniques for doing this.

Once technique, which I sometimes use, is the flexbox sticky footer.

To achieve this, give the body the following css

body {
  display: flex;
  min-height: 100vh; 
  flex-direction: column;
}

You'll need to wrap the rest of your site content in a container. Perhaps, <div class="site-content"> then give it the following CSS

.site-content {
  flex: 1;
}

Your footer will be placed beneath your .site-content <div>.

This should do the trick.

score 0 · Answer 3 · answered Mar 28 '20 at 02:42

0

Tested on template link you provided.

.footer {
   position: fixed;
   left: 0;
   bottom: 0;
   width: 100%;
   text-align: right;
}

<p>Blabla</p>
<div class="footer">©ikiK</div>

answered Mar 28 '20 at 02:42

ikiK

ikiK mmm... not working your Blabla with this tags. You tried only on one page [link](https://oiz.altervista.org/generic2.html) and not on the oher [link](https://oiz.altervista.org/generic3.html). It covers the text. It will came after the section. Think that position fixed `left: 0 bottom: 0; width: 100%;` it's too much easy to works on this. thanks the same – Mar 28 '20 at 04:17