相关疑难解决方法(0)

这是我用来实现上述布局的代码:

.header {
  height: 50px;
}

.body {
  position: absolute;
  top: 50px;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
}

.sidebar {
  width: 140px;
}

.main {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.content {
  flex: 1;
  display: flex;
}

.column {
  padding: 20px;
  border-right: 1px solid #999;
}

<div class="header">Main header</div>
<div class="body">
  <div class="sidebar">Sidebar</div>

  <div class="main">
    <div class="page-header">Page Header. Content columns are below.</div>
    <div class="content">
      <div class="column">Column 1</div>
      <div class="column">Column 1</div>
      <div class="column">Column …

我想使用flexbox使用全高应用程序.我在这个链接中使用旧的flexbox(显示:框;以及其他东西)找到​​了我想要的东西:CSS3 Flexbox全高应用和溢出

对于旧版本的flexbox css属性,这是一个正确的解决方案.

如果我想尝试使用较新的flexbox属性,我将尝试在同一链接中使用第二个解决方案,但使用高度为0px的容器 "黑客"弹性框; 它使显示垂直滚动.

我不喜欢它,因为它引入了其他问题,它更像是一个解决方案而不是解决方案.

我准备了一个基本示例的jsfiddle:http://jsfiddle.net/ch7n6/

html, body {
    height: 100%;    
}
#container {
	display: flex;
	flex-direction: column;
	height: 100%;
}
#container article {
	flex: 1 1 auto;
	overflow-y: scroll;
}
#container header {
    background-color: gray;
}
#container footer {
    background-color: gray;
}

它是一个"全高html网页",由于内容元素的flexbox,页脚位于底部.我建议你在css代码和结果之间移动吧来模拟不同的高度.

在关于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的旧设备？

我会感激任何答案.谢谢.