Mobile browser bug with Ryan's Sticky Footer

Question

First of all, I think Ryan's Sticky Footer is great. Very compatible easy to implement. It's here if you haven't seen/heard of it before http://ryanfait.com/html5-sticky-footer/

* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
margin: 0 auto -155px; /* the bottom margin is the negative value of the footer's height */
}
footer, .push {
height: 155px; /* '.push' must be the same height as 'footer' */
}

/*

Sticky Footer by Ryan Fait
http://ryanfait.com/

*/

My issue though is. I've implemented it and great it's working, but on my mobile browser there's a bug. With Ryan's Sticky Footer implemented the mobile browser url bar doesn't auto-hide when I scroll down, it just stays there, taking up valuable space. Not good.

So I've narrowed this down to the 100% body height. When I remove that, the mobile browser url bar hides. Great. But the footer isn't sticky.

Has anyone come across this before? Is there a fix? Or have is Ryan's Sticky Footer now flawed :(

It's probably Ryan's sticky footer doesn't work for mobile. Try a different solution, such as: http://mystrd.at/modern-clean-css-sticky-footer/ — jaypb, Mar 09 '16 at 23:41
That's what I'm thinking, thanks I'll give that a go and see how it goes — Benjamin Heap, Mar 10 '16 at 00:46

score 0 · Answer 1 · edited May 23 '17 at 12:07

0

When the body's height is set to 100% directly, it can no longer expand to the size of its contents. Set min-height instead.

html {
   height: 100%;
}

body {
   min-height: 100%;
}

See this answer: Link

edited May 23 '17 at 12:07

Community

1
1

answered Mar 09 '16 at 23:52

Lincoln Tosi

86
4

It doesn't fix it, it breaks Ryan's sticky footer. I tried it out here http://jsfiddle.net/gfcarv/HxKXg/ – Benjamin Heap Mar 10 '16 at 00:45

Mobile browser bug with Ryan's Sticky Footer

1 Answers1