标签：一个 meta absolute port name set http scale for
要实现的效果：
如果上面元素较少，提交按钮在屏幕底部，如果上面元素较多，接近一屏，或者超过一屏，按钮随之下移。
需要以下几点：
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>
标签：一个 meta absolute port name set http scale for
原文地址：https://www.cnblogs.com/Ifyou/p/13305147.html
