几种非常不错的方法，收藏学习：原文见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. SignalR 外部调用自定义Hub类的方法，Clients为null

    这是因为外部调用的类的对象和你连接的Hub类的对象,这两个对象 不!一!样! 解决方法 在自定义的Hub类中,注入IHubContext对象,然后在方法中调用IHubContext对象来向前端推送数据 ...

  2. DeepSeek R1 简明指南：架构、训练、本地部署及硬件要求

    DeepSeek 新的 LLM 推理方法 DeepSeek 通过强化学习(RL)提出了一种创新的改进大规模语言模型(LLM)推理能力的方法,这在他们最近关于 DeepSeek-R1 的论文中有详细介绍 ...

  3. ZLMediaKit: 快速入门

    目录 ZLMediaKit是什么 编译 安装依赖库 构建项目 问题处理 问题1: srtp 未找到, WebRTC 相关功能打开失败 问题2:依赖库问题 安装 配置和运行 问题处理 问题1: 无权限监 ...

  4. python xlrd 读取表格 单元格值被覆盖

    代码实现顺序: 按行读取 按列读取 满足if条件 单元格值赋值给字典 实现代码: datas = []# 定义一个空列表 for i in range (3,nrows): sheet_data={} ...

  5. https证书中的subject alternative name字段作用及如何生成含该字段的证书

    背景 最近,某个运维同事找到我,说测试环境的某个域名(他也在负责维护),假设域名为test.baidu.com,以前呢,证书都是用的生产的证书,最近不让用了.问为啥呢,说不安全,现在在整改了,因为证书 ...

  6. JMeter HTTP Request Get 请求的时候 response body 为空

    已知原因: 1.Content encoding 的默认编码对应不上,需要手动设置编码为:UTF-8: 2.请求设置 Header,且设置有请求数据类型为 Content-Type: applicat ...

  7. PHP的curl获取header信息

    PHP的curl功能十分强大,简单点说,就是一个PHP实现浏览器的基础. 最常用的可能就是抓取远程数据或者向远程POST数据.但是在这个过程中,调试时,可能会有查看header的必要. echo ge ...

  8. map_server 中障碍物计算规则

    博客地址:https://www.cnblogs.com/zylyehuo/ 参考链接 Autolabor-ROS机器人入门课程<ROS理论与实践> 1.地图中的每一个像素取值在 [0,2 ...

  9. Docker启动关闭所有容器命令

    docker中 启动所有的容器命令 docker start $(docker ps -a | awk '{ print $1}' | tail -n +2) docker中 关闭所有的容器命令 do ...

  10. 密码加密|jsencrypt|md5|加密解密的两种方式

    一.md5 npm install md5 二.JSEncrypt 2.1 介绍 JSEncrypt属于RSA加密,RSA加密算法是一种非对称加密算法: 2.2 使用 安装: npm install ...