如何在一个全高的应用程序中结合弹性和垂直滚动？

我想使用一个全高度的应用程序使用 Flexbox。我发现我想使用旧的柔性箱布局模块(display: box;和其他东西)在这个链接: CSS3 Flexbox 全高应用程序和溢出

这是一个正确的解决方案，浏览器只支持旧版本的弹性框 CSS 属性。

如果我想尝试使用较新的 Flexbox 属性，我将尝试使用与 hack 相同链接中的第二种解决方案: 使用带有 height: 0px;的容器。它使显示垂直滚动。

我不太喜欢它，因为它引入了其他问题，而且它更像是一种解决方案，而不是解决方案。

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;
}
<section id="container" >
<header id="header" >This is a header</header>
<article id="content" >
This is the content that
<br />
With a lot of lines.
<br />
With a lot of lines.
<br />
This is the content that
<br />
With a lot of lines.
<br />
<br />
This is the content that
<br />
With a lot of lines.
<br />
<br />
This is the content that
<br />
With a lot of lines.
<br />
</article>
<footer id="footer" >This is a footer</footer>
</section>

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

这是一个全高的 HTML 网站，页脚位于底部，因为内容元素的 Flexbox 属性。我建议您在 CSS 代码和结果之间移动条形图，以模拟不同的高度。

198752 次浏览
小开
最佳答案

感谢 https://stackoverflow.com/users/1652962/cimmanon给了我答案。

解决方案是设置垂直可滚动元素的高度。例如:

#container article {
flex: 1 1 auto;
overflow-y: auto;
height: 0px;
}

元素 威尔有高度，因为除非你想要一个 最小身高，否则你可以使用与 min-height: 100px;完全相同的 height: 100px;

#container article {
flex: 1 1 auto;
overflow-y: auto;
height: 100px; /* == min-height: 100px*/
}

因此，如果你想在垂直滚动中使用 min-height，最好的解决方案是:

#container article {
flex: 1 1 auto;
overflow-y: auto;
min-height: 100px;
}

如果你只是想要完整的垂直滚动条，以防没有足够的空间看到这篇文章:

#container article {
flex: 1 1 auto;
overflow-y: auto;
min-height: 0px;
}

最终代码: http://jsfiddle.net/ch7n6/867/

小开

关于 flex: 1 1 auto，目前的规范是这样说的:

根据 width/height属性调整项的大小，但使用 他们完全灵活，所以他们吸收任何自由空间沿主 如果所有项目都是 flex: auto、 flex: initial或 < code > flex: 如果没有 ，则项目大小调整后的任何正空闲空间将为 以 flex: auto均匀分布于各项目。

Http://www.w3.org/tr/2012/cr-css3-flexbox-20120918/#flex-common

在我看来，如果你说一个元素是100px 高，它更像是一个“建议”的大小，而不是一个绝对值。因为它被允许缩小和生长，它占用尽可能多的空间。这就是为什么将这一行添加到“ main”元素: height: 0(或任何其他较小的数字)。

小开

这里是 Flexbox 规格编辑器。

这是一个鼓励使用弹性工具箱，但有一些事情你应该调整最好的行为。

  • 不要使用前缀。大多数浏览器都支持无前缀的 Flexbox。始终使用无前缀开始，并且只在必要时添加前缀以支持它。

  • 因为你的页眉和页脚不是用来弯曲的，所以它们都应该有 flex: none;设置。现在，由于一些重叠效应，您有一个类似的行为，但是您不应该依赖于它，除非您想以后意外地混淆自己。(默认是 flex:0 1 auto，所以他们开始在他们的自动高度，可以收缩，但不增长，但他们也是 overflow:visible默认，这触发了他们的默认 min-height:auto防止他们收缩在所有。如果你在它们上面设置一个 overflow，min-height:auto的行为就会改变(切换到零而不是最小内容) ，它们会突然被超高的 <article>元素压扁

  • 你也可以简化 <article>的 flex-只需设置 flex: 1;，你就可以很好地去。尽量坚持使用 https://drafts.csswg.org/css-flexbox/#flex-common中的公共值，除非你有一个很好的理由去做一些更复杂的事情——它们更容易阅读，并且涵盖了你想要调用的大多数行为。


提交答案