sticky-css
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"> <style> .main-content { position: relative; overflow: hidden; color: #fff; } .clearfix { display: inline-block } .clearfix:after { display: block; content: "."; height: 0; line-height: 0; clear: both; visibility: hidden } .detail { position: fixed; width: 100%; height: 100%; z-index: 100; overflow: auto; top: 0; left: 0; background: rgba(0, 0, 0, 0.4); } .detail-wrapper { width: 100%; min-height: 100%; } .detail-close { position: relative; width: 32px; height: 32px; margin: -64px auto 0 auto; clear: both; font-size: 32px; } .detail-main { /*margin-top: 64px;*/ padding-bottom: 64px; } </style> </head> <body> <div class="main-content"> <div class="detail"> <div class="detail-wrapper clearfix"> <div class="detail-main"> <p>hello every body</p> <p>hello every body</p> <p>hello every body</p> </div> </div> <div class="detail-close"> <i>x</i> </div> </div> </div> </body> </html>