第一种方案
<!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>