几种非常不错的方法，收藏学习：原文见https://blog.csdn.net/m0_37070714/article/details/77587753

方法一：footer高度固定+绝对定位

<body>

    <header>header</header>

    <main>content</main>

    <footer>footer</footer>

</body>

　　

html{height:100%;}

body{min-height:100%;margin:0;padding:0;position:relative;}

header{background-color: #ffe4c4;}

main{padding-bottom:100px;background-color: #bdb76b;}/* main的padding-bottom值要等于或大于footer的height值 */

footer{position:absolute;bottom:0;width:100%;height:100px;background-color: #ffc0cb;}

　　首先，设置body的高度至少充满整个屏幕，并且body作为footer绝对定位的参考节点；

其次，设置main（footer前一个兄弟元素）的padding-bottom值大于等于footer的height值，以保证main的内容能够全部显示出来而不被footer遮盖；

最后，设置footer绝对定位，并设置height为固定高度值。

方法二：footer高度固定+margin负值

<body>

    <div class="container">

        <header>header</header>

        <main>main content</main>

    </div>

    <footer>footer</footer>

</body>

　　

html,body{height:100%;margin:0;padding:0;}

.container{min-height:100%;}

header{background-color: #ffe4c4;}

main{padding-bottom:100px;background-color: #bdb76b;}/* main的padding-bottom值要等于或大于footer的height值 */

footer{height:100px;margin-top:-100px;background-color: #ffc0cb;}/* margin-top（负值的）高度等于footer的height值 */

　　

此方法把footer之前的元素放在一个容器里面，形成了container和footer并列的结构：

首先，设置.container的高度至少充满整个屏幕；

其次，设置main（.container最后一个子元素）的padding-bottom值大于等于footer的height值；

最后，设置footer的height值和margin-top负值。

这种方法没有使用绝对定位，但html结构的语义化不如方法一中的结构清晰。

也可以设置负值的margin-bottom在.container上面，此时html结构变化如下：

<body>

    <div class="container">

        <header>header</header>

        <main>main content</main>

        <div class="empty"></div>

    </div>

    <footer>footer</footer>

</body>

html,body{height:100%;margin:0;padding:0;}

.container{min-height:100%;margin-bottom:-100px;}

.empty,footer{height:100px;}

　　

使用一个空的div把footer容器推到页面最底部，同时给container设置一个负值的margin-bottom，这个margin-bottom与footer和.empty的高度相等。

虽然多了一个空的div，语义上也不怎么好，但是相比前面为main元素设置padding-bottom的方法有一个明显的好处：当网页内容不满一屏的时候，如果需要为main元素设置边框、背景色的时候，padding-bottom硬生生地撑出了一片空白，真真是有点丑，但是加个空的div之后，布局方式作用在.empty上，对main的css设置就不影响了，算是一个好处吧！

方法三：footer高度任意+js

<body>

    <header>header</header>

    <main>main content</main>

    <footer>footer</footer>

</body>

　　

html,body{margin:0;padding: 0;}

header{background-color: #ffe4c4;}

main{background-color: #bdb76b;}

footer{background-color: #ffc0cb;}

/* 动态为footer添加类fixed-bottom */

.fixed-bottom {position: fixed;bottom: 0;width:100%;}

　　

$(function(){

    function footerPosition(){

        $("footer").removeClass("fixed-bottom");

        var contentHeight = document.body.scrollHeight,//网页正文全文高度

            winHeight = window.innerHeight;//可视窗口高度，不包括浏览器顶部工具栏

        if(!(contentHeight > winHeight)){

            //当网页正文高度小于可视窗口高度时，为footer添加类fixed-bottom

            $("footer").addClass("fixed-bottom");

        } else {

            $("footer").removeClass("fixed-bottom");

        }

    }

    footerPosition();

    $(window).resize(footerPosition);

});

　　

footer固定在页面底部的几种方法（转载）的更多相关文章

  1. HTML中footer固定在页面底部的若干种方法

    <div class="header"><div class="main"></div></div> <d ...

  2. 如何将页脚固定在页面底部，4中方法 转载自：W3CPLUS

    原博客地址:http://www.w3cplus.com/css/css-sticky-foot-at-bottom-of-the-page 作为一个Web的前端攻城师,在制作页面效果时肯定有碰到下面 ...

  3. 让footer固定在页面底部（CSS-Sticky-Footer）

    让footer固定在页面底部(CSS-Sticky-Footer)     这是一个让网站footer固定在浏览器(页面内容小于浏览器高度时)/页面底部的技巧.由HTML和CSS实现,没有令人讨厌的h ...

  4. footer固定在页面底部的实现方法总结

    方法一:footer高度固定+绝对定位 HTML代码: <body> <header>头部</header> <main>中间内容</main&g ...

  5. 在不适用fixed的前提下，当内容较少时footer固定在页面底部

    使用css,参考国外的一个解决方法: http://ryanfait.com/resources/footer-stick-to-bottom-of-page/ How to use the CSS ...

  6. Footer固定在页面底部(CSS)

    <style type="text/css"> #wapper{ position: relative; /*重要!保证footer是相对于wapper位置绝对*/ h ...

  7. 利用CSS使footer固定在页面底部

    1.HTML基本结构 <!DOCTYPEhtml> <htmlxmlns="http://www.w3.org/1999/xhtml"> <headr ...

  8. 【转载自W3CPLUS】如何将页脚固定在页面底部

    该文章转载自:W3CPLUS 大漠的文章 http://www.w3cplus.com/css/css-sticky-foot-at-bottom-of-the-page 以下为全文 作为一个Web的 ...

  9. 将HTML页面页脚固定在页面底部(多种方法实现)

    当一个HTML页面中含有较少的内容时,Web页面的footer部分随着飘上来,处在页面的半腰中间,给视觉效果带来极大的影响,接下来为大家介绍下如何将页脚固定在页面底部,感兴趣的朋友可以了解下 作为一个 ...

  10. 让footer固定在页面（视口）底部（CSS-Sticky-Footer）

    让footer固定在页面(视口)底部(CSS-Sticky-Footer) 这是一个让网站footer固定在浏览器(页面内容小于浏览器高度时)/页面底部的技巧.由HTML和CSS实现,没有令人讨厌的h ...

随机推荐

  1. Eclipse各历史版本所需的最低JDK版本统计

    Eclipse 版本名称 Version 发布时间 最低支持的jdk Kepler 4.3 2013.06 Java 6 Luna 4.4 2014.06.25 Java 7 Mars 4.5 201 ...

  2. 为 Typecho 添加 B 站蛆音娘表情

    首先为什么帮助文档写的很清楚了我还要发,我只是让你们少走弯路一次弄好,后面我会说到 #1. 准备并上传表情文件 首先,你需要在文章底部下载表情文件,对于表情文件,有如下要求和建议: 所有后缀名必须相同 ...

  3. Linux - Centos6/7忘记root密码怎么办？

    转载:https://www.cnblogs.com/witz/p/10183533.html 一.Centos6.x (1)查看操作系统版本以及内核版本 (2)重启服务器,到如下界面 (3)好吧.. ...

  4. 【攻防世界】wzsc_文件上传

    wzsc_文件上传 题目来源 攻防世界 NO.GFSJ0997 题目描述 经典上传页面 用御剑扫出upload文件夹 /upload路径下是上传的文件 题解 新建几个空文件,发现后缀为txt的文件可以 ...

  5. Flink学习（十一） Sink到Elasticsearch

    导入依赖 <dependency> <groupId>org.apache.flink</groupId> <artifactId>flink-conn ...

  6. 基于标签值分布的强化学习推荐算法(Reinforcement Learning Recommendation Algorithm Based on Label Value Distribution)

    前言 看论文的第三天,坚持下去. 慢慢来,比较快. -- 唐迟 本文基于2023年6月28日发表在MATHEMATICS上的一篇名为"基于标签值分布的强化学习推荐算法"(Reinf ...

  7. 【MATLAB习题】双摇杆机构的运动学分析

    1.双摇杆机构概述 双摇杆机构的判别方法: 最长杆长度+最短杆长度 ≤ 其他两杆长度之和,连杆(机架的对杆)为最短杆时. 如果最长杆长度+最短杆长度 >其他两杆长度之和,此时不论以何杆为机架,均 ...

  8. vuex 踩坑记之unknown local mutation type

    使用模块化定义vuex时,出现了这么个错误unknown local mutation type,检查好久发现单词并没有写错,代码如下: // 引入请求数据的方法 import { reqUsers ...

  9. 当你在浏览器中输入 google.com 后按下回车发生了什么？

    按下"g"键 接下来的内容介绍了物理键盘和系统中断的工作原理,但是有一部分内容却没有涉及.当你按下"g"键,浏览器接收到这个消息之后,会触发自动完成机制.浏览器 ...

  10. 【Yuexingfei_qwq的原创游戏】

    好的其实标题里的Yuexingfei_qwq指的是我. 不定时持续更新ing-- 有bug及时回复或私信我哈-- 本文同步发表在以下Blog: 洛谷:https://www.luogu.com.cn/ ...