2、圣杯布局实现

使用Flex实现三栏布局：两侧固定，中间自适应,

最新推荐文章于 2025-11-25 10:27:20 发布

原创最新推荐文章于 2025-11-25 10:27:20 发布 · 223 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #css #css3

css 专栏收录该内容

2 篇文章

订阅专栏

该文章展示了如何利用CSSFlexbox创建一个三部分布局，其中大盒子具有固定高度，内部包含一个顶部导航、一个中间主要内容区域（中间盒子高度自适应并有滚动条）和底部页脚，所有部分都固定了各自的高度。

大盒子：固定高度 ; 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>

关注博主即可阅读全文