移动 web 开发遇到一个问题。关于 footer 置底的问题

因为手机的各种格式不一致，导致footer置底成了一个问题。从网上找到了一个解决办法。大体是这样的。
boday，html都是设置成height:100%.
container也设置成100%，然后有一个 margin-bottom ：-8em
container 的最下方放一个空的div。高度是 8em
footer的高度也是8em。（与container同级）
这样就保证了页面始终是最底部。

通常的页面这个设置是好使的，而且兼容各种手机，从ipone到note都支持。但是在某种情况就会出问题。
比如在ip5s中，当我的container的高度正好是ip5s的屏幕高度的时候，就会产生footer的logo与container内容叠加的效果。高度差大概在30px左右。
同样的页面在note上，甚至是ip4上看都是ok的。
有时候在note3上看到的一个页面，也是底部的logo与container内容有重合，重合的高度也是20-40px左右，而同样的页面ip5s。ip4看都没有问题。
我不知道问题出在哪里。从逻辑上看。上面的页面布局不应该产生这样的问题。求高人解答一下。
PS：我的页面布局参考的是这个连接http://xuqipeter.diandian.com/post/2013-11-05/40058790906。的第三种方式。