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

2014-04-03 21:57:03 +08:00
 jianghu52
因为手机的各种格式不一致,导致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。的第三种方式。
3485 次点击
所在节点    PHP
4 条回复
ctoicqtao
2014-04-04 15:32:22 +08:00
你是使用在手机端的?主要想兼容那些浏览器?
ctoicqtao
2014-04-04 16:07:22 +08:00
如果做手机端为什么不直接用 position:fixed 呢?
jsonline
2014-04-04 22:04:21 +08:00
@ctoicqtao 他要的效果和 fixed 是不一样的。

我建议楼主直接给 container min-height:600px 吧,何必搞那么多 hack
ctoicqtao
2014-04-04 23:23:44 +08:00
@jsonline 是什么样的效果呢?有点不理解了。

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/107174

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX