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

Question

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

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

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

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

html" target="_blank">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>

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

Answer 1

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

#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;
}