方法一：给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. vue 报错unknown custom element解决方法

    原因: 没有引入相关组件导致的 解决办法: 如果组件是按需引入的必须引入你当前用到的组件,否则会报错

  2. java--String、StringBuilder、StringBuffer的解析和比较？

    一.String的解析 1.String的含义 ①String是不可以被继承的,String类是final类,String类是由char[]数组来存储字符串. ②String是不可变的字符序列,如果存 ...

  3. drf 频率组件 META字典详情

    drf频率组件 什么是频率 控制用户对某个url的请求频率,比如一分钟之内,只能访问三次 自定义频率规则 1.取出访问者ip 2.判断当前ip在不在访问字典中: 不在,则添加进去,返回True; 3. ...

  4. 树莓派开发板入门学习笔记2:[转]树莓派系统在VM中能做什么

    问"树莓派系统在VM中能做什么"不如问"树莓派能做什么":(参考:树莓派实验室) 普通难度的DIY 较高难度的DIY 用树莓派打造一个家庭影院 给树莓派安装摄像 ...

  5. 2018 Multi-University Training Contest 1 Balanced Sequence（贪心）

    题意: t组测试数据,每组数据有 n 个只由 '(' 和 ')' 构成的括号串. 要求把这 n 个串排序然后组成一个大的括号串,使得能够匹配的括号数最多. 如()()答案能够匹配的括号数是 4,(() ...

  6. Linux学习-编译前的任务:认识核心与取得核心原始码

    什么是核心 (Kernel) Kernel 其实核心就是系统上面的一个文件而已, 这个文件包含了驱动主机各项硬 件的侦测程序与驱动模块. 核心文件通常被放置成 /boot/vmlinuz-xxx ,不 ...

  7. HDU 4965 Fast Matrix Calculation 矩阵快速幂

    题意: 给出一个\(n \times k\)的矩阵\(A\)和一个\(k \times n\)的矩阵\(B\),其中\(4 \leq N \leq 1000, \, 2 \leq K \leq 6\) ...

  8. 实现socket并发的几种方法

    # 使用多进程实现socket聊天并发-server #服务端 import socket from multiprocessing import Process def server(conn,ad ...

  9. Apache 根据不同的端口 映射不同的站点

    以前,在本地新建个项目,总是在Apache的htdocs目录下新建个项目目录,今年弄了个别人写好的网站源码,因为该系统的作者假定网站是放在根目录的,放在二级目录下会出错.所以无奈,只能想办法,根据端口 ...

  10. WordCount 2.0（结对项目）

    序言 合作伙伴 201631062220      201631062120 项目码云地址: https://gitee.com/zhege/WordCount 作业详细要求 系统分析与设计结对项目 ...