方法一：给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>

方法三：也是最简单的方法。

html {

  min-height: 100%;

  position: relative;

}

.footer {

position: absolute;

bottom: 0;

width: 100%;

}

如果大家用这几种方法有产生什么弊端，请回复大家一起交流哦！

了解更详细的内容可以访问：http://www.waigai.cn

网页布局中页面内容不足一屏时页脚footer固定底部的更多相关文章

  1. 005-CSS让页脚始终在底部不论页面内容多少

    让页脚始终在页面底部,不论页面内容是多或者少页脚始终在页面底部. 方案一: <!DOCTYPE html> <html> <head> <meta chars ...

  2. CSS网页布局中易犯的30个小错误

    即使是CSS高手,也难免在书写CSS代码的时候出一些小错误,或者说,任何一种代码都是如此.小错误却往往造成大问题,浪费很多无辜的时间来调试和排错.查看下面这份CSS网页布局中易犯的10个小错误,努力的 ...

  3. 在网页布局中合理使用inline formating context（IFC）

    引子:给大家出一个小小的考题,如何使用css来实现类似下面的在指定区域内,内容自适应的垂直居中.

  4. 关于网页布局中常见的margin: 0px ; padding: 0px; 总结

    我们在网页布局中常用到margin: 0px; padding: 0px;  但是在大型的网站布局中通常不这样写通常是按下面这种方式. ul, li, ol, dl, dt, dd, div, p, ...

  5. vivo前端智能化实践：机器学习在自动网页布局中的应用

    作者:vivo 互联网前端团队- Su Ning 在设计稿转网页中运用基于self-attention机制设计的机器学习模型进行设计稿的布局,能够结合dom节点的上下文得出合理的方案. 一.背景 切图 ...

  6. 页面内容不满屏幕高度时，footer底部显示

    底部高度固定的情况下 <style> body,html{ height: 100%; margin: 0; } .content{ min-height: 100%; padding-b ...

  7. （六十六）TableView内容超过一屏时滚动到屏幕底部的方法

    假设数据放置在self.chatMessage数组内,只需要让tableView滚动到最后一条数据底部即可,调用scrollToRowAtIndexPath方法: [_tableView reload ...

  8. CSS实现Footer固定底部，超过一屏自动撑开

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

  9. 详解CSS网页布局中默认字体样式

    浏览器默认的样式往往在不同的浏览器.不同的语言版本甚至不同的系统版本都有不同的设置,这就导致如 果直接利用默认样式的页面在各个浏览器下显示非常不一致,于是就有了类似YUI的reset之类用来尽量重写浏 ...

随机推荐

  1. Python hasattr() 函数

    hasattr() 函数用于判断对象是否包含对应的属性.(has attribute) hasattr(object, name) 参数 object -- 对象. name -- 字符串,属性名. ...

  2. 【题解】Luogu P2081 [NOI2012]迷失游乐园

    原题传送门 这是当时冬令营课上讲的题,咕咕咕到了现在 如果这题没有环套树的话,就很套路了 需要两个数组up[i]和down[i],down[i]表示从i点第一步向下走的期望距离,up[i]表示从i点第 ...

  3. CORS:source,princple,implimentation in Spring

    CORS = Cross-Origin Resource Sharing          一种跨域访问技术 什么是 Origin 要理解CORS,首先得理解什么是 “Origin”.参见RFC645 ...

  4. [CodeForce 450A] Jzzhu and Children

    题目链接:http://codeforces.com/problemset/problem/450/A /* * 计算一个人要是拿足够离开需要排多少次队,选排的次数多的那个人,如果两个人排的次数相同, ...

  5. R语言常用函数：交集intersect、并集union、找不同setdiff、判断相同setequal

    在R语言进行数据分析时,经常需要找不同组间的相同和不同,那你应该掌握如下几个函数,让你事半功倍. 交集intersect两个向量的交集,集合可以是数字.字符串等 # 两个数值向量取交集intersec ...

  6. day2——两数相加

    // 小白一名,0算法基础,艰难尝试算法题中,若您发现本文中错误, 或有其他见解,往不吝赐教,感激不尽,拜谢. 领扣 第2题 今日算法题干//给定两个非空链表来表示两个非负整数.位数按照逆序方式存储, ...

  7. mac 安装2019Adobe全家桶

    链接:https://pan.baidu.com/s/1UrAnB5fmHKmYPESvqkU3Rg  密码:803f 下载大师版, 进入解压后的文件夹,双击安装程序 打开了安装界面,进入下图中的安装 ...

  8. rematch：当你受不了redux繁琐写法的时候，是时候了解一波rematch了

    前言: 前段时间学习完react后,刚好就接到公司一个react项目的迭代,顺便巩固一下前段时间的学习成果.项目使用的是redux+react-router,将所有的数据都放在redux中,异步处理数 ...

  9. particular.js

    参数 键值 参数选项/ 说明 实例 particles.number.value number   数量 40 particles.number.density.enable boolean    t ...

  10. extract method

    函数 简短,命名良好 函数名描述的是做什么 而不是怎么做 行数过高的代码中 将一大段做一个事的代码提取到独立的method 中 高层函数直接引用. 创建新函数 将提炼的代码平移到目标函数中 检查是否引 ...