Let’s start with the disobedient

Why is that

If you look at the page structure, it looks something like this

root
    container
        page
        footer
Copy the code

Well, a page is a multi-content DIV that pushes the page out of the scroll bar. If you want the footer to be fixed at the bottom, use fixed. So it looks like this

 /*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;
      }
Copy the code

And let’s see what’s good

The page structure is the same as above. The style changes are as follows

     /*2*/
      .container 
        overflow: hidden;
        height: 100vh;
        width: 100%;
      }
      .page {
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        overflow-y: scroll;
        padding-bottom: 70px;
      }
Copy the code

First, limit the container to viewport height and do not allow scrolling. Second, let the page scroll and push up the navigation bar.

In this case, the scrolling is page, not Container, not browser window.

The complete code

<! 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, /> <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" > see me always < / div > < / div > < / div > < / body > < / HTML >Copy the code