【CSS】Sticky Footer 布局
什么是 Sticky Footer 布局？
Sticky Footer 布局是一种将 footer 吸附在底部的CSS布局。
footer 可以是任意的元素，该布局会形成一种当内容不足，footer 会定位在视口的最低部，当内容充足，footer 会紧跟在内容后面的效果。
position实现 效果1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Sticky Footer 布局</title>
<style>
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
.wrapper {
position: relative; /*border-box: 为元素指定的任何 padding 和 border 都将在已设定的宽度和高度内进行绘制
这里的作用是浏览器视口被当成了 border ,如果不设置该属性则无法将 footer 置于浏览器视口的底部*/
box-sizing: border-box; /*这里的作用是将 .wrapper 的高度撑满整个浏览器的视口，当内容不足的时候，也能保证 .wrapper 的高度是浏览器视口的高度*/
min-height: 100%; /*这里的作用是为 .footer 预留空间，防止 .wrapper 的内容被 .footer 遮盖到，值是 .footer 的高度*/
padding-bottom: 100px;
}
.content ul {
list-style: none;
}
.content ul li {
height: 100px;
background-color: #ccc;
border-bottom: 1px solid #f6f6f6;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 100px;
background-color: #000;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="content">
<ul>
<li></li>
</ul>
</div>
<div class="footer"></div>
</div>
</body>
</html>
position实现 效果2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Sticky Footer 布局</title>
<style>
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
.wrapper {
/*border-box: 为元素指定的任何 padding 和 border 都将在已设定的宽度和高度内进行绘制
这里的作用是浏览器视口被当成了 border ,如果不设置该属性则无法将 footer 置于浏览器视口的底部*/
box-sizing: border-box; /*这里的作用是将 .wrapper 的高度撑满整个浏览器的视口，当内容不足的时候，也能保证 .wrapper 的高度是浏览器视口的高度*/
min-height: 100%; /*这里的作用是为 .footer 预留空间，防止 .wrapper 的内容被 .footer 遮盖到，值是 .footer 的高度*/
padding-bottom: 100px;
}
.content ul {
list-style: none;
}
.content ul li {
height: 100px;
background-color: #ccc;
border-bottom: 1px solid #f6f6f6;
}
.footer {
position: fixed;
bottom: 0;
width: 100%;
height: 100px;
background-color: #000;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="content">
<ul>
<li></li>
</ul>
</div>
<div class="footer"></div>
</div>
</body>
</html>
flex实现 效果1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Sticky Footer 布局</title>
<style>
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
.wrapper {
/*使用 flex 布局 子元素列排布*/
display: flex;
flex-direction: column; /*这里的作用是将 .wrapper 的高度撑满整个浏览器的视口，当内容不足的时候，也能保证 .wrapper 的高度是浏览器视口的高度*/
min-height: 100%;
}
.content {
/*因为父元素使用了 flex 布局，这里设置使 .content 的高度是 .wrapper 的高度减去 .footer 的高度*/
flex: 1;
}
.content ul {
list-style: none;
}
.content ul li {
height: 100px;
background-color: #ccc;
border-bottom: 1px solid #f6f6f6;
}
.footer {
height: 100px;
background-color: #000;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="content">
<ul>
<li></li>
</ul>
</div>
<div class="footer"></div>
</div>
</body>
</html>
flex实现 效果2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Sticky Footer 布局</title>
<style>
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
.wrapper {
/*使用 flex 布局 子元素列排布*/
display: flex;
flex-direction: column; /*这里的作用是将 .wrapper 的高度撑满整个浏览器的视口，当内容不足的时候，也能保证 .wrapper 的高度是浏览器视口的高度*/
min-height: 100%;
}
.content {
/*因为父元素使用了 flex 布局，这里设置使 .content 的高度是 .wrapper 的高度减去 .footer 的高度*/
flex: 1;
}
.content ul {
list-style: none;
}
.content ul li {
height: 100px;
background-color: #ccc;
border-bottom: 1px solid #f6f6f6;
}
.footer {
position: fixed;
bottom: 0;
width: 100%;
height: 100px;
background-color: #000;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="content">
<ul>
<li></li>
</ul>
</div>
<div class="footer"></div>
</div>
</body>
</html>
calc实现 效果1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Sticky Footer 布局</title>
<style>
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
.wrapper {
/*使用 calc 需要显示的设置 height ，如果使用 min-height 则会是跟随的效果*/
min-height: 100%;
}
.content {
/*min-height 是CSS的计算函数*/
min-height: calc(100% - 100px);
}
.content ul {
list-style: none;
}
.content ul li {
height: 100px;
background-color: #ccc;
border-bottom: 1px solid #f6f6f6;
}
.footer {
height: 100px;
background-color: #000;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="content">
<ul>
<li></li>
</ul>
</div>
<div class="footer"></div>
</div>
</body>
</html>
calc实现 效果2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Sticky Footer 布局</title>
<style>
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
.wrapper {
height: 100%;
}
.content {
/*min-height 是CSS的计算函数*/
min-height: calc(100% - 100px);
}
.content ul {
list-style: none;
}
.content ul li {
height: 100px;
background-color: #ccc;
border-bottom: 1px solid #f6f6f6;
}
.footer {
position: fixed;
bottom: 0;
width: 100%;
height: 100px;
background-color: #000;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="content">
<ul>
<li></li>
</ul>
</div>
<div class="footer"></div>
</div>
</body>
</html>
【CSS】Sticky Footer 布局的更多相关文章
- css sticky footer 布局 手机端
什么是css sticky footer 布局? 通常在手机端写页面 会遇到如下情况 页面长度很短不足以撑起一屏,此时希望页脚在页面的底部 而当页面超过一屏时候,页脚会在文章的底部 ,网上有许多办法, ...
- css sticky footer 布局
方法一:footer 上用负的 margin-top 在内容外面需要额外包一层元素(wrap)来让它产生对应的 padding-bottom.是为了防止负 margin 导致 footer 覆盖任何实 ...
- css sticky footer布局
Sticky footers设计是最古老和最常见的效果之一,大多数人都曾经经历过.它可以概括如下:如果页面内容不够长的时候,页脚块粘贴在视窗底部:如果内容足够长时,页脚块会被内容向下推送.套路为:内容 ...
- 【css技能提升】完美的 Sticky Footer 布局
在总结之前所做的项目时,遇到过下面这种情况. 在主体内容不足够多或者未完全加载出来之前,就会导致出现左边的这种情况,原因是因为没有足够的垂直空间使得页脚推到浏览器窗口最底部.但是,我们期望的效果是页脚 ...
- CSS Sticky Footer
----CSS Sticky Footer 当正文内容很少时,底部位于窗口最下面.当改变窗口高度时,不会出现重叠问题. ----另一个解决方法是使用:flexBox布局 http://www.w3c ...
- 两种最常用的Sticky footer布局方式
Sticky footer布局是什么? 我们所见到的大部分网站页面,都会把一个页面分为头部区块.内容区块和页脚区块,当头部区块和内容区块内容较少时,页脚能固定在屏幕的底部,而非随着文档流排布.当页面内 ...
- 前端经典布局：Sticky footer 布局
什么是Sticky footer布局?前端开发中大部分网站,都会把一个页面分为头部区块.内容区块.页脚区块,这也是比较.往往底部都要求能固定在屏幕的底部,而非随着文档流排布.要实现的样式可以概括如下: ...
- CSS Sticky Footer: 完美的CSS绝对底部
CSS的简单在于它易学,CSS的困难在于寻找更好的解决方案.在CSS的世界里,似乎没有完美这种说法.所以,现在介绍的CSS绝对底部,只是目前个人见过的方案中比较完美的吧. 先说我们为什么会使用到这个C ...
- sticky footer布局，定位底部footer
其作用就是当内容区域比较少时,让footer也能正常定位到底部,以前我们使用js来达到这种效果,其实用css也是完全可以的 <!DOCTYPE html> <html lang=&q ...
随机推荐
- ReentrantLock原理
ReentrantLock主要利用CAS+CLH队列来实现.它支持公平锁和非公平锁,两者的实现类似. CAS:Compare and Swap,比较并交换.CAS有3个操作数:内存值V.预期值A.要修 ...
- LeetCode100.相同的树
给定两个二叉树,编写一个函数来检验它们是否相同. 如果两个树在结构上相同,并且节点具有相同的值,则认为它们是相同的. 示例 1: 输入: 1 1 / \ / \ 2 3 2 3 [1,2,3], [1 ...
- [Linux]Ubuntu 16.04 远程桌面
来源:http://blog.csdn.net/zz_1215/article/details/77921405 先吐槽一下,网上教的方法都是半桶水,都被教到连接后出现灰屏,只有这个博主(zz_121 ...
- GDI+_从Bitmap里得到的Color数组值解决方案
' InkHin_ZhiZhuo ' Date :2019.2.18 ' E-mail lqx@tyningling.Top 'This function and Module is written ...
- Java_监听器监听文件夹变动
package demo4; import java.io.IOException;import java.nio.file.FileSystems;import java.nio.file.Path ...
- Git自学笔记
Git是什么? Git是目前世界上最先进的分布式版本控制系统,用于敏捷高效地处理任何或小或大的项目. Git与SVN的区别有哪些? ① Git是分布式的,SVN不是.这是Git和其它非分布式版本控制系 ...
- 布局inline-block问题
当在一行中需要展示多个拥有块级属性的标签元素时,通常选择display:inline-block; 优点:不用设置浮动或定位,浮动脱离文档流还需要清除浮动,定位降低扩展性. 问题: 1.标签元素之间会 ...
- echars 图表提示框自定义显示
一 . 显示单条数据时在tooltip里调用formatter函数给自定义提示框内数据. 效果图显示 二 . 当显示多条数据时.为保证和原来的效果相同需要自己实现点的效果.如果不实现,提示框则不限点的 ...
- Spring开始
Spring 主要作用:spring的主要作用是解耦,降低代码间的耦合度(指降低类和类之间的耦合度).根据功能的不同,可以将系统中的代码分成主业务逻辑和系统级业务逻辑两类.Spring根据代码功能的特 ...
- scrapy 爬取豆瓣互联网图书
安装scrapy conda install scrapy 生成一个scrapy项目 scrapy startproject douban settings文件 # -*- coding: utf-8 ...