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

约定不等于承诺〃 2021-09-14 13:28 277阅读 0赞

<!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上面，每个样式都有它的意义。