Trouble getting my footer at the bottom

1

Hello guys. Basicaly to have my footer at the bottom, i’m using this code:
body, html {
position: relative;
height: 100%;
margin: 0px;
padding: 0px;
}
#principal {
min-height: 100%;
position: relative;
}
#content {
padding-bottom: 60px;
}
.footer {
position:absolute;
bottom:0px;
left: 0px;
right: 0px;
width:100%;
height: 60px;
}

But it doesn’t work :confused:

Here is my work:

I’m not using codepain because of image background and multiple pages…

3

Hello, i’m going to try it out. And i know files online from an unknown person… I would not do it myself :smiley:

1 Like
4

Okay so after looking things over, I think I see what’s going on.

#principle looks like your wrapping container and instead of setting a specific height (in your case 2000 px) you should set it to at least: height: auto;
That will give your other elements freedom to push their container as tall as it needs to be to fit them.

Which brings up issue #2:

After changing the height, your #btsSio section being set to position: relative; is then keeping that footer from being positioned at the bottom. Technically you don’t need a relative position on this element (#btsSio) at all. It looks like you’re using it to center the element, but you can just use margin: 0 auto; to do that instead and nix the left positioning entirely.

In fact you can do that with all the elements you’re trying to center. Just make sure when you’re using that margin styling, that you set widths on the elements you want centered. It doesn’t even have to be a stringently defined pixel value, you can easily set the width to a percentage and then and overall max-width to however wide you want it (which helps with responsiveness if you’re not going the flexbox root like @SkyC suggested).

Something like this: https://codepen.io/drding/pen/wqJByp

5

Hello, the first solution is not managable because i have this:

<html>
<body>
  <header>
  </header>

  <div id="main">
  ....
  <footer></footer>
  </div>
  </body>
</html>

And for the second response, it doesn’t work :confused:
The #btsSio relative is because of the positionnement i want for my

6

I manage to do some thing… It’s not perfect because the height do have the same height in every page.
If i put height: auto on my #principal, it doesn’t do what it should :confused:
So it’s “work” but the footer is some time a bit to far down

I would like a footer that is like margin-top: 200px every time with a height auto

7

Glad the margin: 0 auto; worked for you though, it’s a handy little bit of code.

I updated my codepen (https://codepen.io/drding/pen/wqJNyR), hopefully that’ll work for you. Just a heads up, the footer is a little wonky looking in editor view but if you check out the pen in full view it displays correctly.

I’m basing all this off of this tutorial by the way: http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page (Matt has some other really awesome tutorials worth checking out too)

Here’s also a few other methods you might want to try: https://css-tricks.com/couple-takes-sticky-footer/

8

Thx i will try out :slight_smile: Have a nice day