Hi,
I’m having trouble with CSS for my footer on the Random Quote Machine page. I would like the footer to be at the bottom of the page always - so you may need to scroll to see it. I can get it set to the bottom of the page, but when the page is larger than the viewport, it seems to stick to the bottom of the viewport. I feel like I have tried every variation of position:relative and position: absolute. The problem is most visible on mobile.
Can you help me? My project is here: http://genestd.github.io/RQM/
Hi,
It’s kinda hard for me to tell you exactly what the problem is since I don’t have access to the code, but have you tried position: fixed?
add height: 100% to html, body and wrapper, then add margin-top: -$footer-height to the wrapper.
Position fixed would keep it in the same spot in the viewport; I wanted it stuck to the bottom of the page.
@marzelin: thanks, i found a site that explained it ( http://ryanfait.com/sticky-footer/ ) and the solution was very close to what you posted. He adds a hidden div in the wrapper that matches the footer.