方法一：给html、body都设置100%的高度，确定body下内容设置min-height有效，然后设置主体部分min-height为100%，此时若没有header、footer则刚好完美占满全屏（参考《div绝对居中、宽高自适应、多栏宽度自适应》），但是有了这两个，只能另寻他路，由于高版本浏览器对box-sizing的支持，我们可以在100%的高度中通过padding给header、footer空出两部分空白区域，再通过给header设置等同于自身高度的负值margin-bottom，给footer设置等同于自身高度的负值margin-top，就完美的把两者移回可见区域，如此以来，既满足content部分不满一屏时footer在底部，又满足了，超过一屏时footer被撑开的需求。

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>footer始终处在底部</title>

</head>

<style>

    *{

        margin: 0;

        padding: 0;

        box-sizing:border-box;

    }

    html,body { height: 100%;}

    header {

        height: 60px;

        margin-bottom: -60px;

        background: #1381cc;

        color: #FFF;

        position: relative;

    }

    section {

        background: #fff;

        min-height: 100%;

        padding: 60px 0 60px;}

    footer {

        height:60px;

        margin-top: -60px;

        background: #0c4367;

        color: #FFF;

    }

</style>

<body>

    <header></header>

    <section class="content">

        <div style="height:1000px;"></div>

    </section>

    <footer class="footer"></footer>

</body>

</html>

方法二：将footer以外的部分再用wrap包裹起来，内部设置padding-bottom，footer相同的使用margin-top，如此以来不用使用border-box；

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>footer始终处在底部</title>

</head>

<style>

    *{

        margin: 0;

        padding: 0;

    }

    html,body { height: 100%;}

    .wrap{

        min-height: 100%;

    }

    .min{

        padding-bottom: 60px;

    }

    header {

        height: 60px;

        background: #1381cc;

        color: #FFF; 

    }

    section {

        background: #fff;

    }

    footer {

        height:60px;

        margin-top: -60px;

        background: #0c4367;

        color: #FFF;

    }

</style>

<body>

    <div class="wrap">

        <div class="min">

            <header></header>

            <section class="content">

                <div style="height:10px;"></div>

            </section>

        </div>

    </div>

    <footer class="footer"></footer>

</body>

</html>

三：兼容更强

CSS实现Footer固定底部，超过一屏自动撑开的更多相关文章

  1. 网页布局中页面内容不足一屏时页脚footer固定底部

    方法一:给html.body都设置100%的高度,确定body下内容设置min-height有效,然后设置主体部分min-height为100%,此时若没有header.footer则刚好完美占满全屏 ...

  2. HTML5+CSS把footer固定在底部

    在刚开始给网页写footer的时候,我们会碰到一个让人烦躁的问题:当页面内容太少时,footer显示在了页面中间,这是我们不希望出现的,我们希望它能够永远呆在底部,不管网页的内容是多还是少.下面的代码 ...

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

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

  4. CSS粘住固定底部的5种方法

    本文主要介绍一个Footer元素如何粘住底部,使其无论内容多或者少,Footer元素始终紧靠在浏览器的底部.我们知道,当内容足够多可以撑开底部到达浏览器的底部,如果内容不够多,不足以撑开元素到达浏览器 ...

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

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

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

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

  7. div footer标签css实现位于页面底部固定

    Web页面的“footer”部分随着飘上来,处在页面的半腰中间,给视觉效果带来极大的影响,让你的页面看上去很不好看,特别是现在宽屏越来越多,这种现象更是常见,本文将介绍两种解决方案,需要了解的朋友可以 ...

  8. 网站设计:将Footer固定在浏览器底部

    在设计网站的时候,如果你某个页面的内容没有满屏,那你的footer会离浏览器底部很远,整体看起来很难看,这里用JavaScript提供一种方法来将footer固定在浏览器底部. function fi ...

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

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

随机推荐

  1. datatable css not work

    样式不显示问题 无论是放内联样式文件还是直接放HTML文件都不显示 后来发现是因为datatable是放在后面初始化,它自带的样式覆盖了我们自定义的样式 所以要注意写code时,很多时候不是code不 ...

  2. CentOS7 安装操作命令

    #timedatectl set-timezone Asia/Shanghai 关闭SELinux vi /etc/sysconfig/selinux #SELINUX=enforcing SELIN ...

  3. CentOS 系统下Gitlab搭建与基本配置 以及代码备份迁移过程

    GitLab 是一个开源的版本管理系统,提供了类似于 GitHub 的源代码浏览,管理缺陷和注释等功能,你可以将代码免费托管到 GitLab.com,而且不限项目数量和成员数.最吸引人的一点是,可以在 ...

  4. 图解一致性协议2PC和3PC

    原图地址:https://www.processon.com/diagraming/5b89f6ace4b0d4d65bf10786

  5. 【netbeans】【ubuntu】ubuntu netbeans 抗锯齿化修复

    每一个在ubuntu下用netbeans的,都会对它的字体怎么会显示的那么难看表示很不理解.我就是因此几乎没有用netbeans的.   不过今天终于解决问题了,虽然没有eclipse显示的那么漂亮, ...

  6. 【jquery】 form ajaxSubmit 问题

    常见问题 这个插件跟哪些版本的jQuery兼容? 这个插件需要jQuery v1.0.3 或 以后的版本. 这个插件需要其它插件的支持吗? 不需要. 这个插件的运行效率高吗? 是的!请到 对比页面 查 ...

  7. 强大的with语句

    上下文管理器对象存在的目的是管理 with 语句,就像迭代器的存在是为了管理 for 语句一样. with 语句的目的是简化 try/finally 模式.这种模式用于保证一段代码运行完毕后执行某项操 ...

  8. luogu3386 【模板】二分图匹配 匈牙利算法 hdu2063 过山车 dinic

    luogu 匈牙利算法 #include <iostream> #include <cstring> #include <cstdio> using namespa ...

  9. 大数据学习——scala类相关操作

    1 类的定义 package com /** * Created by Administrator on 2019/6/3. */ //类并不用声明为public. class Person { // ...

  10. python--命名规范及常见的数据类型

    1.python的命名规范 (1)不能以数字开头,不能出现中文. (2)命名以字母开头,包含数字,字母(区分大小写),下划线. (3)不能包含关键字,见名知意. 2.python常见的数据类型 (1) ...