因为手机的各种格式不一致,导致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。的第三种方式。
这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。
https://www.v2ex.com/t/107174
V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。
V2EX is a community of developers, designers and creative people.