使用element-ui开发的时候遇到了坑,在chrome、Firefox、就连IE都正常的情况下,国产浏览器(极速内核)却有问题。
大概的布局是这个意思:
<!-- body已经设置height:100% -->
<el-container style="height: 100%;">
<el-container>
<el-header> Header </el-header>
<el-main> xxxx </el-main>
<el-footer> Footer </el-footer>
</el-container>
</el-container>
在这样一个布局下(这是element官方提供的布局方式),main无法自动撑开页面(正常情况)。
研究了一下是因为
在我的观察下,element-ui中声明的flex-basis:auto在国产浏览器下出现了bug,应该是flex-basis属性声明的情况下优先级比flex还要高,导致flex:1无法正常工作。
解决方法就是覆盖css为el-main添加具体高度,flex-basis或者height都行,例如
flex-basis:0; (100%也行,-webkit-flex-basis也行)
或者删除原css的flex-basis属性(当然修改源码不太推荐)