AARRGGHHH Posted September 24, 2018 Share Posted September 24, 2018 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 Link to comment Share on other sites More sharing options...
Funce Posted September 24, 2018 Share Posted September 24, 2018 (edited) 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 Link to comment Share on other sites More sharing options...
AARRGGHHH Posted September 24, 2018 Author Share Posted September 24, 2018 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 Link to comment Share on other sites More sharing options...
Funce Posted September 24, 2018 Share Posted September 24, 2018 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. Link to comment Share on other sites More sharing options...
dsonesuk Posted September 25, 2018 Share Posted September 25, 2018 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. Link to comment Share on other sites More sharing options...
amir.karman Posted September 25, 2018 Share Posted September 25, 2018 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%; } Link to comment Share on other sites More sharing options...
dsonesuk Posted September 25, 2018 Share Posted September 25, 2018 Because you should never use position: absolute; for layout purposes only for overlapping. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now