要實現的效果：
如果上面元素較少，提交按鈕在屏幕底部，如果上面元素較多，接近一屏，或者超過一屏，按鈕隨之下移。
需要以下幾點：
1、按鈕和上面元素在一個div中，父div相對定位，需要居底的div絕對定位。
2、父div min-height: 100vh。
3、父div設一個偽類，偽類設置一定高度，或者直接用padding-bottom。
完整demo:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"> <title>Title</title> <style> body{ border: 0; margin: 0; } .cont{ position: relative; min-height: 100vh; padding-bottom: 95px; box-sizing: border-box; } .cont .list { height: 65px; line-height: 65px; border-bottom: 1px solid #F2F2F2; text-align: center; font-size: 15px; background-color: #ffffff; } .btn { position: absolute; text-align: center; bottom: 0; font-size: 16px; color: #FFFFFF; margin: 25px 0; width: 335px; height: 45px; line-height: 45px; background: #E0E0E0; border-radius: 5px; background-color: #1B68FD; left: 50%; transform: translateX(-50%); } </style> </head> <body> <div class="cont"> <div class="list">list</div> <div class="list">list</div> <div class="list">list</div> <div class="list">list</div> <div class="list">list</div> <div class="list">list</div> <div class="list">list</div> <div class="list">list</div> <div class="list">list</div> <div class="list">list</div> <div class="list">list</div> <div class="list">list</div> <div class="list">list</div> <div class="btn">按鈕</div> </div> </body> </html>
作者：指尖跳動
鏈接：https://www.jianshu.com/p/d48e93a8f459
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。
鏈接：https://www.jianshu.com/p/d48e93a8f459
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。