方法一:给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] 范围之间没有出现 ...