Keeping a Footer on the Bottom - Issue with W3Schools Sample Code

[AARRGGHHH 0]

This CSS does a good job of keeping the footer at the bottom of a page.

https://www.w3schools.com/howto/howto_css_fixed_footer.asp

The problem is that the footer is always visible.  I'd like the footer to only be visible when the user has scrolled to the bottom of the page.  Suggestions?

Thank you

 

[Funce 42]

My suggestion is to not use a fixed footer? Just put it in at the bottom of the page.

Edited September 24, 2018 by Funce

[AARRGGHHH 0]

Changing to absolute or block , or removing the position entirely, just creates different problems.  There's no way to " Just put it in at the bottom of the page." since the location of the bottom will vary based on screen resolution

[Funce 42]

What issues are you having in regards to it? I need something a bit more specific.

Is it the webpage doesn't reach the bottom of the browser in some resolutions? That's fixable.

Is it layout issues, and has nowhere for it to fit? That's fixable.

 

[dsonesuk 913]

https://www.w3schools.com/code/tryit.asp?filename=FVLGIE5M0TM4

The footer remains at bottom until content extends beyond that of the footer, then it will remain at bottom of content.

[amir.karman 0]

18 hours ago, dsonesuk said:

https://www.w3schools.com/code/tryit.asp?filename=FVLGIE5M0TM4

The footer remains at bottom until content extends beyond that of the footer, then it will remain at bottom of content.

i tried something like the code u sent... (my footer has a certain width of 60px for example.

i want it right in the middle and in the footer:

<div class="down">
	<div class="downcenter"> footer
    </div>
</div>

<style>
  .down{

}
.downcenter{
	bottom: 0;
	position: absolute;
	display: block;
  background-color: rgba(0,0,0,.5);
  color:#fdfdfd;
  width: 100px;
  height:20px;
   margin-left: auto;
   margin-right: auto;

}
</style>

but it wont work it goes to the left and stick there!

i even tried this but it is in left corner and wont move to center:

.down{
bottom: 0;

    position: absolute;
	height: 20px;
    width: 200px;
	margin:0 auto;
}
.downcenter{
	display: block;
  background-color: rgba(0,0,0,.5);
  color:#fdfdfd;
  width:100%;

}

 

[dsonesuk 913]

Because you should never use position: absolute; for layout purposes only for overlapping.