flex Sticky Footer布局

会玩代码的猫

于 2023-03-29 19:59:11 发布

阅读量95

点赞数

文章标签： css html css3

本文链接：https://blog.csdn.net/weixin_43465508/article/details/129844210

版权

<style>
body {
            margin: 0;
        }

        .main {
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }

        .main .header {
            height: 100px;
            background-color: red;
        }

        .main .content {
            flex-grow: 1;
        }

        .main .footer {
            height: 100px;
            background-color: blue;
        }
    </style>
</head>

<body>
    <div class="main">
        <div class="header"></div>
        <div class="content">
            <p>测试内容</p>
            <p>测试内容</p>
            <p>测试内容</p>
            <p>测试内容</p>
        </div>
        <div class="footer"></div>
    </div>
</body>