V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
jianghu52
V2EX  ›  PHP

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

  •  
  •   jianghu52 · 2014-04-03 21:57:03 +08:00 · 3570 次点击
    这是一个创建于 3873 天前的主题,其中的信息可能已经有所发展或是发生改变。
    因为手机的各种格式不一致,导致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。的第三种方式。
    4 条回复    1970-01-01 08:00:00 +08:00
    ctoicqtao
        1
    ctoicqtao  
       2014-04-04 15:32:22 +08:00
    你是使用在手机端的?主要想兼容那些浏览器?
    ctoicqtao
        2
    ctoicqtao  
       2014-04-04 16:07:22 +08:00
    如果做手机端为什么不直接用 position:fixed 呢?
    jsonline
        3
    jsonline  
       2014-04-04 22:04:21 +08:00
    @ctoicqtao 他要的效果和 fixed 是不一样的。

    我建议楼主直接给 container min-height:600px 吧,何必搞那么多 hack
    ctoicqtao
        4
    ctoicqtao  
       2014-04-04 23:23:44 +08:00
    @jsonline 是什么样的效果呢?有点不理解了。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2810 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 21ms · UTC 09:13 · PVG 17:13 · LAX 01:13 · JFK 04:13
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.