All geek questions in one place

Cannot get CSS Sticky footer to work. What am I doing wrong?

Ok, this is my first post and really enjoy the site.

I have a very simple (ugly as a sin) website that I started, and for some reason I cannot get CSS Sticky to work in FireFox. IE works, but FF shows it halfway up the page.

URL http://dev.aipoker.co.uk

I know that I have to develop in FF and fix errors in IE, so I assume that maybe I really made a mistake, and some of them work in IE, but not elsewhere.

Can someone help get me out of my passes?

Thank you guys and girls.

+4
source share
4 answers

Try one , it works well in Firefox.

By the way, you should listen to the Boagworld podcast if you haven't already. It's great!:)

Greetings.

+3
source

I had success with code like this:

footer { display: block; position: absolute; width: 100%; bottom: 0px; }
+4
source

The minimum changes I can make are:

  • moving footerSection inside the body.
  • set the absolute position for both the body and the footer
  • set bottom = 0px on footerSection

which ends with something like this in your head:

 <style type="text/css"> #body, #footerSection { position: absolute; } #footerSection { bottom: 0px; } </style> <div id="body"> ... <div id="footerSection"> ... </div> </div>
+1
source

This is all you need to know about CSS with just sticky footers and footers:

Stick to the bottom of the page

 Position: absolute; top:auto; bottom: 0;

Stick to the bottom of the screen

 Position: fixed; top:auto; bottom:0;

Any problems and probably due to where you placed your HTML code (don't make the footer a child unless it adheres to the content wrapper) or overlapping CSS.

You can apply the same technique to sticky navigation by flipping the car and the top. It'sis cross-browser compatible (from memory from IE7 and above), including mobile phones.

+1
source

Source: https://habr.com/ru/post/1277375/

More articles:


All Articles