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

ios 7 的 safari 不支持 min-height:100%?

  •  
  •   jianghu52 · 2014-04-30 17:02:51 +08:00 · 4117 次点击
    这是一个创建于 3862 天前的主题,其中的信息可能已经有所发展或是发生改变。
    最近写一个适合手机访问的页面,遇到一个情况。需要footer 置底。(页面小于一屏的时候,footer在屏幕最底端,页面大于一屏的时候,footer在页面的最底端)。
    我的做法是内容div(container)属性:
    height:100%
    min-heigth:100%
    margin-bottom:-8em;(8em是footer div的高度)
    footer div与container平级,属性:
    height:8em;

    这样的一个设定,在ios6 的iphone4,iphone5s 的safari下都是好使的,note3上也是好用的。唯独到了ios 7下的safari上不行了。具体现象就是在内容不到一屏的时候,footer直接就紧挨着内容显示,而不是在屏幕的最底端。

    我一点点替换之后,发现是这条css的原因。
    min-heigth:100%。
    如果我改成
    min-heigth:1300px;
    这样,就没有问题。我想问一下这是为什么。
    5 条回复    2014-05-01 10:46:24 +08:00
    P233
        1
    P233  
       2014-04-30 17:36:08 +08:00
    container 的父层要一层一层往上一直到 html 元素全部是 height 100% 或者 min-height 100%,才会管用
    vidon
        2
    vidon  
       2014-04-30 17:48:40 +08:00   ❤️ 2
    f0101
        3
    f0101  
       2014-04-30 18:04:49 +08:00
    你写错了.是min-height:100% 不是min-heigth:100%。
    sneezry
        4
    sneezry  
       2014-04-30 18:14:18 +08:00
    楼主,你已经写了height: 100%,应该就不用再写min-height: 100%了吧,所以我觉得问题不在min-height上。
    jianghu52
        5
    jianghu52  
    OP
       2014-05-01 10:46:24 +08:00
    @vidon 谢谢。我按照这个实验一下。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5148 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 21ms · UTC 09:45 · PVG 17:45 · LAX 01:45 · JFK 04:45
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.