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

2014-04-30 17:02:51 +08:00
 jianghu52
最近写一个适合手机访问的页面,遇到一个情况。需要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;
这样,就没有问题。我想问一下这是为什么。
4114 次点击
所在节点    程序员
5 条回复
P233
2014-04-30 17:36:08 +08:00
container 的父层要一层一层往上一直到 html 元素全部是 height 100% 或者 min-height 100%,才会管用
vidon
2014-04-30 17:48:40 +08:00
f0101
2014-04-30 18:04:49 +08:00
你写错了.是min-height:100% 不是min-heigth:100%。
sneezry
2014-04-30 18:14:18 +08:00
楼主,你已经写了height: 100%,应该就不用再写min-height: 100%了吧,所以我觉得问题不在min-height上。
jianghu52
2014-05-01 10:46:24 +08:00
@vidon 谢谢。我按照这个实验一下。

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

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

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

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

© 2021 V2EX