帶貨直播原始碼，固定位置的底部導航欄實現
阿新 • • 發佈：2021-09-03
帶貨直播原始碼，固定位置的底部導航欄實現的相關程式碼
<!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" /> <title>foooter</title> <script src="https://unpkg.com/vue@next"></script> <style> body { padding: 0; margin: 0; } /*1*/ /* .container { background-color: tan; } .page { background-color: teal; padding-bottom: 70px; } .page-item { padding: 150px 0; } .footer { position: fixed; bottom: 0; left: 0; right: 0; height: 70px; background-color: tomato; }*/ /*2*/ .container { background-color: tan; overflow: hidden; height: 100vh; width: 100%; } .page { width: 100%; height: 100%; box-sizing: border-box; background-color: teal; overflow-y: scroll; padding-bottom: 70px; } .page-item { padding: 150px 0; } .footer { position: fixed; bottom: 0; left: 0; right: 0; height: 70px; background-color: tomato; } </style> </head> <body> <div id="root"> <div class="container"> <div class="page"> 111 <div class="page-item"></div> <div class="page-item"></div> <div class="page-item"></div> <div class="page-item"></div> <div class="page-item"></div> <div class="page-item"></div> <div class="page-item"></div> <div class="page-item"></div> <div class="page-item"></div> 222 </div> <div class="footer">看我動不動</div> </div> </div> </body> </html>
以上就是 帶貨直播原始碼，固定位置的底部導航欄實現的相關程式碼，更多內容歡迎關注之後的文章