2、圣杯布局实现

红烧鱼+奶茶

于 2023-01-07 17:05:30 发布

阅读量208

点赞数

CC 4.0 BY-SA版权

分类专栏： css 文章标签： html css css3

本文链接：https://blog.youkuaiyun.com/interstingh/article/details/128592234

css 专栏收录该内容

2 篇文章

订阅专栏

大盒子：固定高度 ; display：flex ; flex-direction: column

上下盒子：固定高度

中间盒子（自适应）：height: 100% ; flex: 1 ; overflow: auto

<body>
    <div class="box">
        <div class="nav"></div>
        <div class="main">
            <div>aaa</div>
            <div>aaa</div>
            <div>aaa</div>
            <div>aaa</div>
        </div>
        <div class="footer"></div>
    </div>

</body>

<style>
    /* 圣杯布局两边固定高度，中间自适应 */
    .box {
        width: 400px;
        /*固定高度或者100% */
        height: 400px;
        display: flex;
        flex-direction: column;
    }

    .nav {
        width: 100%;
        height: 100px;
        background-color: skyblue;
    }

    .main {
        width: 100%;
        /*自适应高度一般为100% */
        height: 100%;
        flex: 1;
        overflow: auto;
        background-color: pink;
    }

    .main div {
        height: 80px;
        width: 80px;
        background-color: rgb(98, 101, 98);
    }

    .footer {
        width: 100%;
        height: 100px;
        background-color: rgb(20, 214, 88);
    }
</style>