绝对底部(保持footer在页面最底部)

发表于 |

绝对底部(保持footer在页面最底部)

demo

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绝对底部(保持footer在页面最底部)</title>
    <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
</head>
<body>
<style>
    * {
        margin: 0;
        padding: 0;
    }
    body {
        height: 100vh;
    }
    #wrap {
        height: auto;
        min-height: 100%;
    }
    #main {
        padding-bottom: 150px; /* 和footer相同的高度 */
    }
    #footer {
        margin-top: -150px; /* footer高度的负值 */
        height: 150px;
        background: #0c8ed9
    }
</style>

<div id="wrap">
    <div id="main">
        <div id="app" style="padding: 40px;">
            <button @click="toggle">切换数据长度 {{length}}</button>
            <ul>
                <li v-for="i in length">数据</li>
            </ul>
        </div>
    </div>
</div>
<div id="footer">底部</div> <!--底部和外层同级-->
</body>
<script>
    const lenArr = [20,400]
    new Vue({
      el: '#app',
      data:{
        length: lenArr[0]
      },
      methods:{
        toggle(){
          this.length = this.length === lenArr[0]?lenArr[1]:lenArr[0]
        }
      }
    })
</script>
</html>