sticky-footers

第一种方案

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
        .clearFix { display: inline-block; }
        .clearFix::after { display: block; content: "."; height: 0; line-height: 0; clear: both; visibility: hidden; }
        .detail { position: fixed; z-index: 100; top: 0; right: 0; width: 100%; height: 100%; overflow: auto; background: rgba(7, 17, 27, 0.8); -webkit-backdrop-filter blur(10px); }
        .detail-wrapper { width: 100%; min-height: 100%; }
        .detail-wrapper .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">
                我我我
            </div>
        </div>
        <div class="detail-close">X</div>

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

第二种方案 flex

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

<head>
    <meta charset="UTF-8">
    <title>flex-footer</title>
</head>
<style>
body { margin: 0; display: flex; flex-flow: column; min-height: 100vh; }
main { flex: 1; }
header { background: pink; }
footer { background: #333; color: #fff; }
</style>

<body>
    <header>
        <h1>header</h1>
    </header>
    <main>
        <p>main</p>
    </main>
    <footer>
        <p>footer</p>
    </footer>
</body>

</html>

 

posted @ 2017-08-24 16:33  CorderBob  阅读(159)  评论(0)  编辑  收藏  举报