CSS实现Footer固定底部，超过一屏自动撑开
方法一：给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固定底部，超过一屏自动撑开的更多相关文章
- 网页布局中页面内容不足一屏时页脚footer固定底部
方法一:给html.body都设置100%的高度,确定body下内容设置min-height有效,然后设置主体部分min-height为100%,此时若没有header.footer则刚好完美占满全屏 ...
- HTML5+CSS把footer固定在底部
在刚开始给网页写footer的时候,我们会碰到一个让人烦躁的问题:当页面内容太少时,footer显示在了页面中间,这是我们不希望出现的,我们希望它能够永远呆在底部,不管网页的内容是多还是少.下面的代码 ...
- 利用CSS使footer固定在页面底部
1.HTML基本结构 <!DOCTYPEhtml> <htmlxmlns="http://www.w3.org/1999/xhtml"> <headr ...
- CSS粘住固定底部的5种方法
本文主要介绍一个Footer元素如何粘住底部,使其无论内容多或者少,Footer元素始终紧靠在浏览器的底部.我们知道,当内容足够多可以撑开底部到达浏览器的底部,如果内容不够多,不足以撑开元素到达浏览器 ...
- 让footer固定在页面（视口）底部（CSS-Sticky-Footer）
让footer固定在页面(视口)底部(CSS-Sticky-Footer) 这是一个让网站footer固定在浏览器(页面内容小于浏览器高度时)/页面底部的技巧.由HTML和CSS实现,没有令人讨厌的h ...
- 让footer固定在页面底部（CSS-Sticky-Footer）
让footer固定在页面底部(CSS-Sticky-Footer) 这是一个让网站footer固定在浏览器(页面内容小于浏览器高度时)/页面底部的技巧.由HTML和CSS实现,没有令人讨厌的h ...
- div footer标签css实现位于页面底部固定
Web页面的“footer”部分随着飘上来,处在页面的半腰中间,给视觉效果带来极大的影响,让你的页面看上去很不好看,特别是现在宽屏越来越多,这种现象更是常见,本文将介绍两种解决方案,需要了解的朋友可以 ...
- 网站设计:将Footer固定在浏览器底部
在设计网站的时候,如果你某个页面的内容没有满屏,那你的footer会离浏览器底部很远,整体看起来很难看,这里用JavaScript提供一种方法来将footer固定在浏览器底部. function fi ...
- footer固定在页面底部的实现方法总结
方法一:footer高度固定+绝对定位 HTML代码: <body> <header>头部</header> <main>中间内容</main&g ...
随机推荐
- d3.js--04(enter和exit)
enter() 当DOM数量少于data的数量,或者压根一个都没有的时候,我们一般会希望让程序帮忙创建. <!DOCTYPE html> <html> <head> ...
- k8s的资源限制及资源请求
容器的资源需求及限制: 需求:requests ##定义容器运行时至少需要资源 限制:limits ##定义容器运行时最多能分配的资源 requests:pod.spec.con ...
- tempfs详解
致因 在平常工作中,我们经常需要查看Linux服务器磁盘挂载使用情况,可以使用df命令,不知大家注意到没有,我们使用此命令除了会查看到系统盘以及数据盘挂载情况,还会看到一个tmpfs也在挂载. [ro ...
- RSA非对称加密算法实现过程
RSA非对称加密算法实现过程 非对称加密算法有很多,RSA算法就是其中比较出名的算法之一,下面是具体实现过程 <?php /** */ class Rsa { /** * private key ...
- oop中 限制文件类型和大小
<?php /** * Created by IntelliJ IDEA. * User: jiabinwang * Date: 7/5/18 * Time: 8:46 PM */ namesp ...
- GoF23种设计模式之结构型模式之享元模式
一.概述 运用共享技术有效地支持大量细粒度的对象. 二.适用性 1.当一个应用程序使用了大量的对象的时候. 2.由于使用大量的独享而造成很大的存储开销的时候. 3.对象的大多数状态都可变为外部状态的 ...
- logging记录了其他操作的问题
做atm作业的时候,记录转账操作的那个功能的文件里,同时也记录了增加账号和冻结账号的操作 2018-11-28 17:14:51,754 : transfer : INFO : 用户edward向用户 ...
- 通过SWD J-Link使用J-Link RTT Viewer来查看打印日志
详细的说明可以参考:https://www.cnblogs.com/iini/p/9279618.html sdk版本: 15.2.0 例程目录:\nRF5_SDK_15.2.0_9412b96\ex ...
- POJ：2586-Y2K Accounting Bug
Y2K Accounting Bug Time Limit: 1000MS Memory Limit: 65536K Description Accounting for Computer Machi ...
- Python虚拟机中的一般表达式（一）
在Python虚拟机框架这一章中,我们通过PyEval_EvalFrameEx看到了Python虚拟机的整体框架.而这章开始,我们将了解Python虚拟机是如何完成对Python的一般表达式的执行,这 ...