最近写一个适合手机访问的页面,遇到一个情况。需要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;
这样,就没有问题。我想问一下这是为什么。
我的做法是内容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;
这样,就没有问题。我想问一下这是为什么。