如何在全高应用程序中结合使用 flexbox 和垂直滚动? [英] How can I combine flexbox and vertical scroll in a full-height app?
问题描述
我想使用使用 flexbox 的全高应用程序.我在此链接中使用旧的 flexbox 布局模块(display: box;
和其他东西)找到了我想要的东西:CSS3 Flexbox 全高应用程序和溢出
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 网站,由于内容元素的 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;
完全一样: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 {
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屋!