Div not staying at bottom of visible screen

Question

I had a footer on my site which stayed at the bottom of the visible screen at all times. I added the following piece of CSS to make the screen stay centered when the browser is resized:

CSS

  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  min-width:600px;

And now the footer is no longer stuck to the bottom of visible screen. On pages with lots of content, the footer is at the very bottom of the page, but on pages with little content, it is just floating in the center of the page.

Here is the footer CSS:

Footer.css

 #footer{
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    min-width:100%;
    width:100%;
    height:50px;
    opacity:0.8;
}

And here is a before and after Image of what it did and now does look like:

Before & After

Can anyone help fix this?

Thanks!

Take a look on [this question](http://stackoverflow.com/questions/30485839/footer-not-staying-at-the-bottom?rq=1) and [this one](http://stackoverflow.com/questions/526035/html-css-positioning-float-bottom?rq=1) — AndreaM16, Nov 13 '15 at 10:36
Have a look at this :) http://cssreset.com/how-to-keep-footer-at-bottom-of-page-with-css/ — Kees Sonnema, Nov 13 '15 at 10:40

GibboK · Accepted Answer · 2015-11-13T11:07:14.347

1

The problem is caused by the translateX applied on the HTML tag, so try to remove that style from applying on the HTML tag.

In order t solve this try to add a wrapper for your content <div id="main"> and applying your style there #main{}.

Live example here:

https://jsfiddle.net/cwmz9r7u/1/

Generally how you have keep the footer at the bottom on the screen was good but if you move your content including the footer using translateX on HTML, your position is not kept any longer as your user case.

edited Nov 13 '15 at 11:07

answered Nov 13 '15 at 10:56

GibboK

71,848
143
435
658

That is my code anyway, I know that works to keep the footer at the bottom of the viewport, but when adding the code aforementioned CSS code this no longer sticks it to the bottom – dev_py_uk Nov 13 '15 at 10:58
@drewith could you please show us you live site, or create a jsfiddle so we can have a look in details? thanks – GibboK Nov 13 '15 at 10:59
https://jsfiddle.net/cwmz9r7u/ the site isn't live but here is a quick fiddle, if you remove the .html { } section, the footer sticks, if not, it doesnt – dev_py_uk Nov 13 '15 at 11:01
@drewith I have edited my question, please let me know if it solved your issue. Thaks – GibboK Nov 13 '15 at 11:09
I have just tried that and it still floats in the middle of the screen – dev_py_uk Nov 13 '15 at 11:14
@drewith are you sure that your code is implemented right?CSS in answer seems fix the problem, here an example :https://jsfiddle.net/cwmz9r7u/3/light/ please double check your code, and if the problem persist, create a jsfiddle so I can have a look for you. thanks! – GibboK Nov 13 '15 at 13:53
Your answer did fix it! I had multiple
s that had not been closed which was stopping it from working as it should. However on pages where there are vast amounts of php code it doesnt seem to work - Any idea if this is a 'Thing' that could cause an issue?
– dev_py_uk Nov 13 '15 at 15:32
@drewith probably, but without seeing all your vast amount of php it is not easy to say :) if you have found my answer useful, please consider accepting my answer clicking the GREEN icon on the side. Thanks for it. – GibboK Nov 13 '15 at 20:39

Div not staying at bottom of visible screen

1 Answers1