定位布局
<!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>
