CODEWITHSUNDEEP
htmlcss
dev_py_uk
dev_py_uk

Reputation: 428

Div not staying at bottom of visible screen

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

enter image description here

Can anyone help fix this?

Thanks!

Upvotes: 0

Views: 91

Answers (1)

GibboK
GibboK

Reputation: 73908

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.

Upvotes: 1

Related Questions