stick footer

最新推荐文章于 2023-02-13 20:45:00 发布

一只鱼_

最新推荐文章于 2023-02-13 20:45:00 发布

阅读量233

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/sinat_31102083/article/details/79003493

版权

CSS 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>stick-footer</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }
        html,body,.wrapper {
            height: 100%;
        }
        html,body,.wrapper {
            height: auto;
            min-height: 100%
        }
        .main {
            /* 必须使用和footer相同的高度 */
            padding-bottom: 150px;
        }
        .footer {
            position: relative;
            /* footer高度的负值 */
            margin-top: -150px;
            height: 150px;
            clear: both;
        }
        .clearfix:after {
            content: '';
            display: block;
            height: 0;
            clear: both;
            visibility: hidden
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="main clearfix">
            <div class="content"></div>
            <div class="side"></div>
        </div>
    </div>
    <div class="footer">

    </div>
</body>
</html>