129

我想使用一个使用 flexbox 的全高应用程序。我在这个链接中找到了我想要使用旧的 flexbox 布局模块（display: box;和其他东西）的东西：CSS3 Flexbox full-height app and overflow

对于只支持旧版 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 代码和结果之间的栏来模拟不同的高度。

4

3 回答 3

272

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

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

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

该元素将具有高度，因为 flexbox 会重新计算它，除非您想要一个最小高度，因此您可以使用height: 100px;它与以下内容完全相同：min-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/

于 2013-02-19T18:38:59.783 回答
68

Flexbox 规范编辑器在这里。

这是一种鼓励使用 flexbox 的方法，但是您应该调整一些东西以获得最佳行为。

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

  • 由于您的页眉和页脚不是要弯曲的，因此它们都应该flex: none;设置在它们上面。现在，由于某些重叠效果，您有类似的行为，但您不应该依赖它，除非您以后想不小心弄糊涂。（默认是flex:0 1 auto，所以它们从它们的自动高度开始，可以缩小但不能增长，但它们也是overflow:visible默认的，这会触发它们的默认值min-height:auto以防止它们完全缩小。如果你在它们上设置了一个，改变overflow的行为min-height:auto（切换到零而不是最小内容），它们会突然被超高的<article>元素压扁。）

  • 您也可以简化<article> flex- 只需设置flex: 1;好就可以了。尽量坚持https://drafts.c ​​sswg.org/css-flexbox/#flex-common 中的通用值，除非你有充分的理由去做更复杂的事情——它们更容易阅读并涵盖大部分行为你会想要调用。

于 2015-12-18T19:31:59.193 回答
21

当前的规范说明了这一点flex: 1 1 auto：

根据width/height属性调整项目大小，但使它们完全灵活，以便它们吸收沿主轴的任何可用空间。如果所有项目都是flex: auto、flex: initial或flex: none，则在调整项目大小后的任何正可用空间都将平均分配给具有 的项目flex: auto。

http://www.w3.org/TR/2012/CR-css3-flexbox-20120918/#flex-common

在我看来，如果你说一个元素是 100px 高，它更像是一个“建议”大小，而不是绝对大小。因为它被允许收缩和增长，所以它占用了尽可能多的空间。这就是为什么将此行添加到您的“主要”元素的原因：（ height: 0或任何其他小数字）。

于 2013-02-19T18:50:18.120 回答