方法一：给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. 阿里云服务器下安装LAMP环境(CentOS Linux 6.3)

    http://ninghao.net/course/514 http://www.sphinxsearch.org/archives/243 ctrl + l  putty 清理屏幕 apache 自 ...

  2. E​x​c​h​a​n​g​e​邮​箱​搭​建

    出现的问题: System.Runtime.InteropServices.COMException(0x8004020F): The server rejected one or more reci ...

  3. 01_4_Struts路径问题

    01_4_Struts路径问题 1. Struts路径问题说明 struts2中的路径问题是根据action的路径而不是jsp路径来确定,所有尽量不要使用相对路径. 虽然可以使用redirect方式解 ...

  4. [转载]matlab图像处理为什么要归一化和如何归一化

    matlab图像处理为什么要归一化和如何归一化,一.为什么归一化1.   基本上归一化思想是利用图像的不变矩寻找一组参数使其能够消除其他变换函数对图像变换的影响.也就是转换成唯一的标准形式以抵抗仿射变 ...

  5. 【转】C++后台开发应该读的书

    转载自http://www.cnblogs.com/balloonwj/articles/9094905.html 作者 左雪菲 根据我的经验来谈一谈,先介绍一下我的情况,坐标上海,后台开发(也带团队 ...

  6. NOIP模拟赛 篮球比赛1

    篮球比赛1(basketball1.*) Czhou为了提高机房里各种神牛的身体素质,决定在每次训练后举行篮球比赛.为了保持比赛公平,Czhou要将神牛们分成两队.首先神牛们赛前都要排成固定的队伍:然 ...

  7. 【二分 最大流】bzoj1532: [POI2005]Kos-Dicing

    晚上果然不适合调题目 Description Dicing 是一个两人玩的游戏,这个游戏在Byteotia非常流行. 甚至人们专门成立了这个游戏的一个俱乐部. 俱乐部的人时常在一起玩这个游戏然后评选出 ...

  8. 初涉manacher

    一直没有打过……那么今天来找几道题打一打吧 manacher有什么用 字符串的题有一类是专门关于“回文”的.通常来说,这类问题要么和一些dp结合在一起:要么是考察对于manacher(或其他如回文自动 ...

  9. Python基础-包与模块

    Python基础-包与模块 写在前面 如非特别说明,下文均基于Python3 摘要 为重用以及更好的维护代码,Python使用了模块与包:一个Python文件就是一个模块,包是组织模块的特殊目录(包含 ...

  10. LeetCode（5）Longest Palindromic Substring

    题目 Given a string S, find the longest palindromic substring in S. You may assume that the maximum le ...