flex 显示模式下让垂直内容撑满高度并滚动

效果

让一个块在高度超过容器时能垂直滚动,高度小于容器时能充满整个容器的高度。

内容高于容器时
内容低于容器时
内容
内容
内容
内容

内容
内容

内容
内容
footer

代码

<section id="demo-container">
    <header id="header">
      header
    </header>
    <article id="demo-content">
        内容
        <br>
        内容
        <br>
        内容
        <br>
        内容
        <br>
        <br>
        内容
        <br>
        内容
        <br>
        <br>
        内容
        <br>
        内容
        <br>
    </article>
    <footer id="footer">
      footer
    </footer>
</section>
<style>
#demo-container {
    display: flex;
    flex-direction: column;
    height: 200px;
    width: 100%;
    background-color: red;
}

#demo-container header {
    background-color: gray;
}
#demo-container article {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
}
#demo-container footer {
    background-color: gray;
}
</style>

关键点

#demo-comtainer要设置一个高度,.article除了 flex 的 css 外,设置 min-height: 0;即可在原来的基础上实现本文的效果。

Leave a comment

* - Required fields