Flexbox和垂直滚动在全高度应用程序使用NEWER flexbox api [英] Flexbox and vertical scroll in a full-height app using NEWER flexbox api

问题描述

我想使用flexbox的全高度应用程式。我发现我想使用旧的flexbox（显示：框;和其他东西）在这个链接： CSS3 Flexbox全高应用程序和溢出

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

这是一个正确的解决方案为旧版本的flexbox css属性。

This is a correct solution for the old version of the flexbox css properties.

如果我想尝试使用更新的flexbox属性，我将尝试使用同一链接中的第二个解决方案，但是hackingflexbox 使用一个height为0px的容器它显示一个垂直滚动。

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

我不喜欢它很多，因为它介绍了其他问题和它是一个workarround <

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

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

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

#container {
    display: -webkit-flex;
    -webkit-flex-direction: column;
    height: 100%;
}
#container article {
    -webkit-flex: 1 1 auto;
    overflow-y: scroll;
}

这是一个全高度html网络底部是因为内容元素的flexbox。我建议你移动css代码和结果之间的bar来模拟不同的高度。

It is a "full-height html web" and the footer are at the bottom because of the flexbox of the content element. I suggest you move the bar between css code and result to simulate different height.

推荐答案

//stackoverflow.com/users/1652962/cimmanon\">http://stackoverflow.com/users/1652962/cimmanon ，给了我答案。

Thanks to http://stackoverflow.com/users/1652962/cimmanon that gave me the answer.

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

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

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

元素会具有高度，因为flexbox会重新计算除非您想要一个 min-height ，以便您可以使用 height：100px; ，它与以下内容完全相同： min-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 {
    -webkit-flex: 1 1 auto;
    overflow-y: auto;
    height: 100px; /* == min-height: 100px*/
}

您希望在垂直滚动中使用最小高度：

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

#container article {
    -webkit-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 {
    -webkit-flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0px;
}

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

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