如何在全高度应用程序中组合flexbox和垂直滚动?


101

我想通过Flexbox使用全高应用。我display: box;在此链接中找到了使用旧的flexbox布局模块(和其他东西)所需的内容:CSS3 Flexbox全高应用程序和溢出

对于仅支持旧版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网站,由于content元素的flexbox属性,页脚位于底部。我建议您在CSS代码和结果之间移动栏,以模拟不同的高度。


这不是您要寻找的行为吗? jsfiddle.net/ch7n6/2
cimmanon

2
jsfiddle.net/ch7n6/3是的!它是。:D但是我不明白为什么我需要指出一个高度才能获得效果。无论如何设置:高度:1像素;工程
何塞擦玻璃

现在,我将高度更改为最小高度。好多了。谢谢。
何塞擦玻璃

1
@JoséCabo+1-漂亮的把戏高度0:显示垂直滚动!您能解释一下为什么行得通吗?
Danield

1
您应该同时应用于flex-shrink:0页眉和页脚。
Saorikido

Answers:


202

感谢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/


2
min-height在Chrome中使用无法正常工作,它会以某种方式影响页脚的大小。height但是,使用可以得到理想的结果。
phant0m 2015年

1
尝试将其放置在“自动”位置。我对此进行了研究,我认为正确的地方是此属性。因此,与其使用最小高度和最小高度,不如使用它。
何擦玻璃

height: 0修复了内容溢出与否时内容溢出的2px跳动。太奇怪了。谢谢。
ProblemsSuSumit

@Sumit,能否提供您所面临的问题的图片?
何塞擦玻璃

我打开了小提琴链接,但似乎无法再在Chrome(在Firefox中运行)上正常工作。滚动条消失了。有谁知道如何使它重新工作?
下注

61

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中的常见值-较容易阅读并涵盖大多数行为您将要调用。


21

当前规范对此表示flex: 1 1 auto

根据width/ height属性调整项目的大小,但使其具有充分的灵活性,以便它们吸收主轴上的任何自由空间。如果所有的项目要么flex: autoflex: initial或者flex: none,该项目已被大小后的任何积极的自由空间将被平均分配到与项目flex: auto

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

在我看来,如果您说一个元素的高度为100px,则它会被视为“建议”尺寸,而不是绝对尺寸。因为它允许收缩和增长,所以它会占用其允许的最大空间。这就是为什么将此行添加到“ main”元素中的原因:( height: 0或任何其他较小的数字)。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.