flex引起的子元素无法设置height: 100%的问题(safari & chrome)

  |   1 评论   |   2,168 浏览

2017年10月27日18:52:04 补充:safari似乎修复了这个问题!

===以下为原文===

在先前的开发中,曾经写过这样的代码:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0,maximum-scale=1.0,user-scalable=no, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
#main {
  height: 100vh;
  display: flex;
  flex-direction: column;
}
main {
  flex: 1;
  border: 1px solid blue;
}
header, footer {
  flex: 0 0 auto;
  height: 64px;
  border: 1px solid red;
}
#test {
  height: 100%;
  background-color: gray;
  border: 1px solid black;
}
</style>
</head>
<body>
<div id="main">
  <header></header>
  <main>
    <div id="test">
      我是id为test的div,我设置了height: 100%
    </div>
  </main>
  <footer></footer>
</div>
</body>
</html>

这段代码乍一看似乎没有什么问题。用人类的语言可以这样叙述:

#app的高度为100vh,内部的header, main, footer使用flex布局,从上到下依次排列,headerfooter的高度不弹性变化,为64pxmain占据屏幕剩下的所有高度。其中main中的#test的高度为100% main元素的高度,并且背景颜色为gray

但是其兼容性却出了问题。在chrome和safari中的表现不一致。
大家可以点击我,查看在safari中和chrome中的不同表现。
如果没有设备…也可以看图来查看一下这之间的差异。
这是chrome
chrome

这是safari
safari

经过多方摸索,我发现chrome原先也有这个问题,但是后来被修复了,而safari却还一直有这个问题。真是不知道怎么回事…要不怎么说safari是新时代的ie6呢…或者说safari和ie之间存在不明不白的py关系…?
ie6

下面来说说解决方案

方案一:

main设置display: flex; flex-direction: column;
#test设置flex: 1;
新增代码大致如下:

  main {
      display: flex;
      flex-direction: column;
  }
  #test {
      flex: 1
  }

在safari中,这下终于乖乖的啦。
safari
您也可以点击我,查看在safari中的变化~

方案二:

曲线救国。我们给main设置position: relative,然后给#test设置position: absolute; left: 0; right: 0; top: 0; bottom: 0;
这时,main#testcss代码为:

main {
  flex: 1;
  position: relative;
  border: 1px solid blue;
}
#test {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: gray;
  border: 1px solid black;
}

这下在safari中的显示也是乖乖的了~
img
大家也可以点击我,对比效果。

结语

目前我就发现了这两种较为简单的解决方案…在stackoverflow上也有许多针对flex布局的兼容性发起的讨论,我也参考了很多大神的各种各样的说法去一一进行了验证,最终才得出了这样两个不需要修改太多代码的解决方案。
flex布局无疑在移动端、PC端(ie10+)大大简化了前端的代码量,但是其存在的兼容性问题也不能被忽略,不同的浏览器解析flex的方式可能有所不同。用flex布局经常会发生一些奇怪的现象,而且flex套flex总是会觉得代码被污染…就很烦很难受。
我觉得我们在遇到这类兼容性问题的时候不能慌,要多去实践,找找解决方案。这其实也是一种踩坑的过程。
我喜欢踩坑,毕竟,编程能力就是在踩过一个一个坑之后慢慢提高的呀~
但是说实在的,我也一直没弄懂为什么会出现这种奇怪的兼容性问题。关于这个问题,在stackoverflow上有大佬说

The contents of a flex container consists of zero or more flex items: each child of a flex container becomes a flex item.

我理解的也不是很明白。基础还是不够扎实,这大概就是我需要不断努力的方向吧。

****

Thanks for Reading

Jiahao.Zhang
Hangzhou Dianzi University 
        Computer Science
Addr: No.1 Avenue,2 Xiasha,Jianggan District,Hangzhou

评论

发表评论

validate