在关于plunker(
https://plnkr.co/edit/gMbgxvUqHNDsQVe4P7ny?p=preview)的这个页面中,有一个奇怪的问题.
在Windows和Android上的Chrome上(Canary也是如此)一切正常.我可以滚动两个区域(左侧和右侧),页面的顶部和底部div位于设备屏幕的顶部和底部.我随时都能看到它们(见下图).
在iPad或iPhone,iOS,Safari或Chrome上,这不是我得到的.还有Windows上的Firefox 47.0.1.
页面很长,右边只有一个滚动,就像页面上没有弹性框一样,这个代码只是被忽略了:
.bigone { display: flex; min-height: 100vh; flex-direction: column; } .main { flex: 1 1 0; display: flex; } .container-fluid { display: flex; } .col-6 { overflow-y: auto; }
Quirk例子:
您只需点击此按钮即可在iPad或iPhone上看到:
为什么会这样?
Safari和Firefox的bug还是Chrome的?
为什么在Chrome上Windows和Android上的一切都很好?
如果在未来的新Safari中这将运行良好,如何处理旧iOS和Firefox的旧设备?
我会感激任何答案.谢谢.
解决方法
这既是令人沮丧又神秘的问题.
这些问题的问题来源通常是minimum sizing algorithm on flex items.这些规则是规范的一部分,可以防止弹性项目缩小超过其内容的大小.此类行为可防止滚动条呈现,因为内容无法溢出弹性项.它只是扩展它.
但是在这种情况下,没有一种标准方法可以覆盖该行为(例如,min-height:0,overflow:hidden).
以下两个建议可以让您更接近解决方案:
(1)由于您希望整个布局显示在视口中(即浏览器窗口上没有垂直滚动条),因此请勿使用min-height来确定容器的大小.这允许容器扩展.请改用固定高度.
对您的代码进行此调整:
.bigone { display: flex; /* min-height: 100vh; <-- REMOVE */ height: 100vh; /* <-- NEW */ flex-direction: column; }
但是,这本身并不能解决问题.
(2)简单快速地解决问题的方法是在.col-6上设置一个高度.
.col-6 { height: 90vh; }
所以看起来Edge,FF和其他“非工作”浏览器需要在该容器上定义一个高度.