footer 跟随+固定底部

最新推荐文章于 2024-08-23 09:58:09 发布

liuscsdn

最新推荐文章于 2024-08-23 09:58:09 发布

阅读量1.1k

点赞数

分类专栏：页面布局样式文章标签：固定底部

本文链接：https://blog.csdn.net/liuscsdn/article/details/89349206

版权

页面布局样式专栏收录该内容

2 篇文章 0 订阅

订阅专栏

footer 固定底部：内容过多超出当前可视窗口的一屏大，footer 跟随在内容尾部；若内容较少或不足当前可视窗口一屏大，则固定在页面底部

有三种方式，前两种是css方式，第三种是js方式

其实三种方法的本质都是给section中间模块一个 min-height

1. 第一种方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>footer固定底部01-css</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
        html,body,div,p,button,header,section,footer{
            margin: 0;
            padding: 0;
            height: 100%;
        }
        header,footer{
            background: lightskyblue;
            line-height:50px;
        }
        #app{
            min-height: 100%;
            height: auto;
            margin: 0 auto -50px;
        }
        .push,footer{
            height: 50px;
            clear: both;
        }
    </style>
</head>
<body>
<div id="app">
    <header>我是内容摘要 <button @click="add">新增内容</button>  <button @click="del">删除一行</button></header>
    <section>
        <p  v-for="cl in contentList">{{cl}}</p>
    </section>
    <div class="push"></div>
</div>
<footer>我是底部footer</footer>
</body>
</html>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            contentList:["我是内容行","woshineironghang"]
        },
        methods:{
            add:function () {
                this.contentList.push('新增内容行，new line！')
            },
            del:function () {
                this.contentList.pop()
            }
        }
    })
</script>

1. 第二种方法：采用 css3 的 calc 计算属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>footer固定底部02-calc</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
        html,body,div,p,button,header,section,footer{
            margin: 0;
            padding: 0;
        }
        header,footer{
            background: lightskyblue;
            line-height:50px;
        }
        section{
            min-height: calc(100vh - 100px);
        }
    </style>
</head>
<body>
<div id="app">
    <header>我是内容摘要 <button @click="add">新增内容</button>  <button @click="del">删除一行</button></header>
    <section>
        <p  v-for="cl in contentList">{{cl}}</p>
    </section>
    <footer>我是底部footer</footer>
</div>
</body>
</html>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            contentList:["我是内容行","woshineironghang"]
        },
        methods:{
            add:function () {
                this.contentList.push('新增内容行，new line！')
            },
            del:function () {
                this.contentList.pop()
            }
        }
    })
</script>

1. 第三种方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>footer固定底部03-js</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
        html,body,div,p,button,header,section,footer{
            margin: 0;
            padding: 0;
        }

        header,footer{
            background: lightskyblue;
            line-height:50px;
        }
    </style>
</head>
<body>
<div id="app">
    <header id="head">我是内容摘要 <button @click="add">新增内容</button>  <button @click="del">删除一行</button></header>
    <section id="sect">
        <p  v-for="cl in contentList">{{cl}}</p>
    </section>
    <footer id="foot">我是底部footer</footer>
</div>
</body>
</html>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            contentList:["我是内容行","woshineironghang"]
        },
        created(){
            this.setSectionHeight();
        },
        methods:{
            add:function () {
                this.contentList.push('新增内容行，new line！')
            },
            del:function () {
                this.contentList.pop()
            },
            setSectionHeight:function () {
                var sect = document.getElementById("sect");
                var allH = document.documentElement.clientHeight;
                var headH = document.getElementById("head").offsetHeight;
                var footH = document.getElementById("foot").offsetHeight;
                var mianH = allH - headH - footH;
                sect.style.minHeight = mianH+"px";
            }
        }
    })
</script>

以上三种方式或许还有不足或问题，欢迎大家留言指导(^▽)