Sticky footers 经典布局（兼容性最好的一种布局方式）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .clearfix {
            zoom: 1;
            display: inline-block;
        }

        .clearfix:before,
        .clearfix:after {
            display: block;
            content: ".";
            height: 0;
            line-height: 0;
            clear: both;
            visibility: hidden
        }

        .detail {
            position: fixed;
            z-index: 100;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background: rgba(7, 17, 27, 0.8)
        }

        .detail-wrapper {
            min-height: 100%;
        }

        .detail-main {
            margin-top: 64px;
            padding-bottom: 64px;
        }

        .detail-close {
            position: relative;
            width: 32px;
            height: 32px;
            margin: -64px auto 0 auto;
            clear: both;
            font-size: 32px;
        }
    </style>
</head>

<body>
    <div class="detail">
        <div class="detail-wrapper clearfix">
            <div class="detail-main">
                <p>随意添加内容</p>
                <p>随意添加内容</p>
                <p>随意添加内容</p>
                <p>随意添加内容</p>
                <p>随意添加内容</p>
                <p>随意添加内容</p>
                <p>随意添加内容</p>
                <p>随意添加内容</p>
                <p>随意添加内容</p>
                <p>随意添加内容</p>
                <p>随意添加内容</p>
                <p>随意添加内容</p>
                <p>随意添加内容</p>
                <p>随意添加内容</p>
                <p>随意添加内容</p>
                <p>随意添加内容</p>
                <p>随意添加内容</p>
                <p>随意添加内容</p>
                <p>随意添加内容</p>
                <p>随意添加内容</p>
                <p>随意添加内容</p>
                <p>随意添加内容</p>
                <p>随意添加内容</p>
            </div>
        </div>
        <div class="detail-close">+</div>
    </div>
</body>

</html>

1.css代码风格：布局放在最前面，样式放在后面

2.有浮动的地方，一定要清除浮动，先要有这个意识。另外设置了setTimeout和setInterval,一定要清除时间函数。

3.sticky footers布局的特点，无论你怎样添加内容，下面那个关闭按钮始终在屏幕底部，内容为空也在底部。

4.布局精髓在css上面，每个样式都有它的意义。

Sticky footers 经典布局（兼容性最好的一种布局方式）

猜你喜欢