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 ...
随机推荐
- linux更新git
在CentOS中使用yum install git安装的git是1.7版本的,所以需要更新1.9以及更高版本的git. 安装方法如下: 1.安装依赖的包: yum -y install curl-de ...
- VueJS坎坷之路222--vue cli 3.0引入静态文件
前两天准备搭建一个vue小项目,当引入jquery脚本的时候一直找不到引入的文件: 在网上搜了好多vue添加静态文件的方法,发现大多数方法都是创建一个与文件夹src同等级的文件夹static存放引入的 ...
- PHP 日常开发过程中的bug集合(持续更新中。。。)
PHP 日常开发过程中的bug集合(持续更新中...) 在日常php开发过程中,会遇到一些意想不到的bug,所以想着把这些bug记录下来,以免再犯! 1.字符串 '0.00'.'0.0'.'0' 是 ...
- 【laravel】Disabling CSRF for Specific Routes - Laravel 5
原文 http://www.camroncade.com/disable-csrf-for-specific-routes-laravel-5/ Disabling CSRF for Specific ...
- PyCharm2019 激活方式
1.修改hosts激活:需要修改hosts,稳定无影响,持续更新,推荐~ 一.修改hosts激活 1.修改hosts文件 将0.0.0.0 account.jetbrains.com和0.0.0.0 ...
- 初学Python02
数据类型和变量: 1.整数 整数在Python中直接输入就好,没有特殊要求(正负整数皆可).由于计算机是二进制的,有时候会使用十六进制表示数字,0X+0-9或者a-f来表示. 2.浮点数 浮点数 ...
- 让Python带你看一场唯美的横飘雪!
“北国风光,千里冰封,万里雪飘”,这句诗描写了一句美丽肃静的风光图,恰逢昨天笔者这边也下了一场比较大的雪,要不今天就用Python带大家也来领略一次美丽的雪景? 开发环境 版本:Python3.6 系 ...
- 新游发布:《Don't touch the color》
这是笨猫工作室最后一个Scratch 2.0游戏,经过笨猫工作室成员的不懈努力,游戏终于可以稳定运行.此次更新添加了最高分数显示,优化了系统流畅度.快来试玩吧!!! 卡搭蓝链:https://kada ...
- 1507: [NOI2003]Editor(块状链表)
1507: [NOI2003]Editor Time Limit: 5 Sec Memory Limit: 162 MBSubmit: 4157 Solved: 1677[Submit][Stat ...
- CF 219 D:Choosing Capital for Treeland(树形dp)
D. Choosing Capital for Treeland 链接:http://codeforces.com/problemset/problem/219/D The country Tre ...