方法一：给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. 【python】python安装和运行报错汇总

    本文主要用于汇总在python开发过程中遇到的各种环境.工具相关问题,便于后续遇到相关问题,及时搞定,持续更新. 一.安装pip失败,具体如下: 错误信息: python setup.py insta ...

  2. python入门：输出1-10以内除去7的所有数（自写）

    #!/usr/bin/env python # -*- coding:utf-8 -*- #输出1-10以内除去7的所有数(自写) """ 变量kaishi赋值等于1,w ...

  3. mysql 的 case when 用法

    正确的格式: case when condition then result when condition then result when condition then result else re ...

  4. 分享一个编程学习网站:https://github.com/justjavac/free-programming-books-zh_CN

    分享一个编程学习网站:https://github.com/justjavac/free-programming-books-zh_CN

  5. #2 create and populate a database && realistic and practical applications

    The Chapter3 & Chapter4 of this book tells you how to create a realistic app on the web through ...

  6. chrome无界面模式headless配置

    引入Options: 配置浏览器: 配置浏览器options,然后传入webdriver.Chrome()就可以成功使用了.

  7. CentOS-文件操作

    centos彻底删除文件夹.文件命令(centos 新建.删除.移动.复制等命令: 1.新建文件夹 mkdir 文件名 新建一个名为test的文件夹在home下 view source1 mkdir ...

  8. 控制台窗口和powershell运行服务会卡住的解决办法

    之前使用nodejs做了一个简单的web服务,通过控制台窗口运行,通过浏览器访问发现有时候浏览器等很久数据都加载不出来,以为是代码有问题,后来发现是控制台卡住了,按一下enter键就好了,当时百度了一 ...

  9. selenium - 下拉框操作

    # 9. 下拉框操作# (1)等待下拉列表和下拉列表中值存在# (2)在下拉列表中选择一个值 # 三种方式# A. 获取所有的下拉列表值,然后用循环去匹配相同的值 select_by_index(下标 ...

  10. Leetcode 448.找到所有数组中消失的数字

    找到所有数组中消失的数字 给定一个范围在  1 ≤ a[i] ≤ n ( n = 数组大小 ) 的 整型数组,数组中的元素一些出现了两次,另一些只出现一次. 找到所有在 [1, n] 范围之间没有出现 ...