sticky-footers

最新推荐文章于 2020-06-15 11:12:30 发布

转载最新推荐文章于 2020-06-15 11:12:30 发布 · 58 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Doduo/p/7423813.html

本文介绍了两种不同的网页布局方法：一种使用固定定位实现弹窗效果；另一种利用Flexbox实现响应式布局，确保页面头部、主体及底部在不同屏幕尺寸下都能正确显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一种方案

<!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>