• 请不要在回答技术问题时复制粘贴 AI 生成的内容
jianghu52
V2EX  ›  程序员

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

  •  
  •   jianghu52 · Apr 30, 2014 · 4720 views
    This topic created in 4429 days ago, the information mentioned may be changed or developed.
    最近写一个适合手机访问的页面,遇到一个情况。需要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 replies    2014-05-01 10:46:24 +08:00
    P233
        1
    P233  
       Apr 30, 2014
    container 的父层要一层一层往上一直到 html 元素全部是 height 100% 或者 min-height 100%,才会管用
    vidon
        2
    vidon  
       Apr 30, 2014   ❤️ 2
    f0101
        3
    f0101  
       Apr 30, 2014
    你写错了.是min-height:100% 不是min-heigth:100%。
    sneezry
        4
    sneezry  
       Apr 30, 2014
    楼主,你已经写了height: 100%,应该就不用再写min-height: 100%了吧,所以我觉得问题不在min-height上。
    jianghu52
        5
    jianghu52  
    OP
       May 1, 2014
    @vidon 谢谢。我按照这个实验一下。
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   1010 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 40ms · UTC 22:21 · PVG 06:21 · LAX 15:21 · JFK 18:21
    ♥ Do have faith in what you're doing.