方法一:给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. shell编辑器vi的常用命令

    一:翻页 ctrl+u向上翻半页 ctrl+f向上翻一页 ctrl+d 向下翻半页 ctrl+b 向下翻一页 二:移动光标指令 0: 光标移至当前行首 $: 光标移至当前行尾 三:常用插入.删除指令 ...

  2. PHP代码-数据爬取(a标签和a标签所对应的内容)

    public function export(){ set_time_limit(1000); // header("Content-type: text/html; charset=utf ...

  3. 2019/4/15 wen 正则表达式

  4. Oracle中的位图索引和函数索引

    位图索引 同样的,先说是什么,再说为什么. 上篇我们说过BTREE索引是将数据表的索引列和行号排序后以树状形式存在磁盘中.那位图索引是什么样的呢? 现有如下日志表,有操作类型字段op_type,该字段 ...

  5. cf C题

    题意:矩阵只包含0,1两种数字,给你一个矩阵A,另一个矩阵B,每一次可以从A中选出一个子矩阵,点击一次使得这个子矩阵的四个角的数字变成与原来相反的数,0变1,1变0.问你可不可以经过有限次的变换把矩阵 ...

  6. 02_计算机网络的OSI七层(应表会传网数物)

    七层: 应用层 表示层 会话层 传输层 网络层 数据链路层 物理层 五层: 应用层 传输层 网络层 数据链路层 物理层 四层: 应用层 传输层 网络层 数据接口层 一.物理层(Physical Lay ...

  7. InvalidArgumentError: ConcatOp : Dimensions of inputs should match: shape[0] = [1,136,240,64] vs. shape[1] = [1,135,240,64]

    初始输入图片大小为1600*1200,设置的输入网络的最大测试图片大小为1600*1200相当于scale =1 ,运行没有问题.之后输入图片大小为1920*1080,测试图片大小为1920*1080 ...

  8. python对Excel表格操作

    操作场景,给一个Excel表格随机生成10万个手机号码 python中常见的对Excel操作模块 xlwt module 将数据写入Excel表 xlrd module 读取Excel表格 xlsxw ...

  9. python笔记—循环控制

    1.print可以打印多个参数,在括号内用,号区分,显示时一个,号显示一个空格 2.import导入时可以用as别名代替,方便两个模块中有相同函数时使用 3.序列解包:将一个序列(或任何可迭代对象)解 ...

  10. ATS 相关

    启动命令 /usr/local/CCTS/bin/trafficserver   start |stop | restart 清盘 /usr/local/CCTS/bin/traffic_server ...