如何在全高度应用程序中组合flexbox和垂直滚动? [英] How can I combine flexbox and vertical scroll in a full-height app?

问题描述

我想通过Flexbox使用全高应用.我在此链接中找到了使用旧的flexbox布局模块(display: box;等)所需的内容:

I want to use a full-height app using flexbox. I found what I want using old flexbox layout module (display: box; and other things) in this link: CSS3 Flexbox full-height app and overflow

对于仅支持旧版flexbox CSS属性的浏览器，这是正确的解决方案.

This is a correct solution for browsers that only support the old version of the flexbox CSS properties.

如果我想尝试使用较新的flexbox属性，我将尝试在列为hack的同一链接中使用第二种解决方案:使用具有height: 0px;的容器.它可以显示垂直滚动.

If I want to try using the newer flexbox properties, I'll try to use the second solution in the same link listed as a hack: using a container with height: 0px;. It makes to show a vertical scroll.

我不太喜欢它，因为它引入了其他问题，并且它是解决方法，而不是解决方案.

I don't like it a lot because it introduces other problems and it is more a workaround than a solution.

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/

I have prepared a JSFiddle as well with a base example: http://jsfiddle.net/ch7n6/

这是一个全高HTML网站，由于content元素的flexbox属性，页脚位于底部.我建议您在CSS代码和结果之间移动栏，以模拟不同的高度.

It is a full-height HTML website and the footer is at the bottom because of the flexbox properties of the content element. I suggest you move the bar between CSS code and result to simulate different height.

推荐答案

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

解决方案是将垂直可滚动元素设置为高度.例如:

The solution is setting a height to the vertical scrollable element. For example:

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

元素将具有高度，因为除非您希望 min-height ，否则flexbox会重新计算它，因此可以使用height: 100px;使其与以下内容完全相同:

The element will have height because flexbox recalculates it unless you want a min-height so you can use height: 100px; that it is exactly the same as: min-height: 100px;

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

因此，如果您想在垂直滚动条中使用min-height，则是最佳解决方案:

So the best solution if you want a min-height in the vertical scroll:

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

如果您只想在没有足够空间查看文章的情况下只想进行垂直垂直滚动，那么

If you just want full vertical scroll in case there is no enough space to see the article:

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

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

这篇关于如何在全高度应用程序中组合flexbox和垂直滚动?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！