Sticky Footer即绝对底部,是一种常用的布局方式,页脚在内容区未超出窗口高度时一直保持在最底部显示,而超过窗口高度时则保持在内容区最底部。

有两种实现方法:

第一种:经典的实现方式

html

<div class="box">
<div class="content">
<p>内容区</p>
</div>
</div>
<div class="footer">
<p>页脚</p>
</div>

css:

        html,body{
height: 100%;
}
.box{
min-height: 100%; //将footer挤到屏幕最底下
}
.content {
padding-bottom: 60px;
}
.footer {
height: 60px;
margin-top: -60px;
}

这种方法需要将内容区包裹在一个外层容器里,将外层容器的最小高度设置为100%,这样不管内容有多少,footer都将被挤在最下面,还有关键的一点就是要为内容区设置一个padding-bottom,这个值需要和footer的height还有margin-top保持一直,这样footer的就可以显示在内容底部。

第二种:flex布局

html:

    <div class="content">
<p>内容区</p>
</div>
<div class="footer">
<p>页脚</p>
</div>

css:

        html,body{
display: flex;
height: 100%;
flex-direction: column;
}
.content {
flex:;
}

这种实现方法更加简便,不需要外层包裹层,利用flex的特性,当其值为1的时候会自动分配剩余可用空间,这样只要不为footer设置flex,内容区就将占据处footer的全部空间,而且是自适应大小的,所以不必设置padding和margin。

Sticky Footer的实现的更多相关文章

  1. CSS Sticky Footer

    ----CSS Sticky Footer 当正文内容很少时,底部位于窗口最下面.当改变窗口高度时,不会出现重叠问题. ----另一个解决方法是使用:flexBox布局  http://www.w3c ...

  2. sticky footer布局,定位底部footer

    其作用就是当内容区域比较少时,让footer也能正常定位到底部,以前我们使用js来达到这种效果,其实用css也是完全可以的 <!DOCTYPE html> <html lang=&q ...

  3. 实现sticky footer的五种方法

    2017-04-19 16:24:48 什么是sticky footer 如果页面内容不够长的时候,页脚块粘贴在视窗底部:如果内容足够长时,页脚块会被内容向下推送. 用position实现? 如果是用 ...

  4. 两种最常用的Sticky footer布局方式

    Sticky footer布局是什么? 我们所见到的大部分网站页面,都会把一个页面分为头部区块.内容区块和页脚区块,当头部区块和内容区块内容较少时,页脚能固定在屏幕的底部,而非随着文档流排布.当页面内 ...

  5. Sticky Footer 绝对底部的两种套路

    最近面了好几个前端,工作经验有高有低,居然都不知道绝对底部是什么,也没有人能说出一种实现方式,让我不禁感慨前端领域的良莠不齐 绝对底部,或者说 Sticky Footer,是一种古老且经典的页面效果: ...

  6. 【CSS】Sticky Footer 布局

    什么是 Sticky Footer 布局? Sticky Footer 布局是一种将 footer 吸附在底部的CSS布局. footer 可以是任意的元素,该布局会形成一种当内容不足,footer ...

  7. 【css技能提升】完美的 Sticky Footer 布局

    在总结之前所做的项目时,遇到过下面这种情况. 在主体内容不足够多或者未完全加载出来之前,就会导致出现左边的这种情况,原因是因为没有足够的垂直空间使得页脚推到浏览器窗口最底部.但是,我们期望的效果是页脚 ...

  8. sticky footer布局

    一.什么是sticky footer 在网页设计中,Sticky footers设计是最古老和最常见的效果之一.它可以概括如下:如果页面内容不够长的时候,页脚块粘贴在视窗底部:如果内容足够长时,页脚块 ...

  9. Sticky Footer,完美的绝对底部

    写在前面 做过网页开发的同学想必都遇到过这样尴尬的排版问题:在主体内容不足够多或者未完全加载出来之前,就会导致出现(图一)的这种情况,原因是因为没有足够的垂直空间使得页脚推到浏览器窗口最底部.但是,我 ...

  10. css sticky footer 布局 手机端

    什么是css sticky footer 布局? 通常在手机端写页面 会遇到如下情况 页面长度很短不足以撑起一屏,此时希望页脚在页面的底部 而当页面超过一屏时候,页脚会在文章的底部 ,网上有许多办法, ...

随机推荐

  1. Use trained sklearn model with pyspark

    Use trained sklearn model with pyspark   from pyspark import SparkContext import numpy as np from sk ...

  2. hdu-5784 How Many Triangles(计算几何+极角排序)

    题目链接: How Many Triangles Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 65536/65536 K (Jav ...

  3. mac laravel 环境变量设置bash_profile

    mac laravel 环境变量设置bash_profile >>>vim ~/.bash_profile '''text export PATH=$PATH:~/.composer ...

  4. manacher(无讲解)

    BZOJ3325: [Scoi2013]密码 https://lydsy.com/JudgeOnline/problem.php?id=3325 分析: 根据前i个字符和一些不等和相等条件就可以确定每 ...

  5. BZOJ4307: Maishroom & Class

    感觉有一点题面没有说得特别明确,就是一个人代替了其他人之后,另一个可以被他代替的人就不能让他来代替自己了. 每个人向自己可以代替的人连边,额外增加一个源点$r$向所有助教连边.第一问答案是$r$不能到 ...

  6. ACM学习历程—HDU5410 CRB and His Birthday(动态规划)

    Problem Description Today is CRB's birthday. His mom decided to buy many presents for her lovely son ...

  7. 百度之星2017初赛A

    雪崩,没晋级,补题 1001 分析:求n-1的约数个数 #include "iostream" #include "cstdio" #include " ...

  8. python爬虫知识点详解

    python爬虫知识点总结(一)库的安装 python爬虫知识点总结(二)爬虫的基本原理 python爬虫知识点总结(三)urllib库详解 python爬虫知识点总结(四)Requests库的基本使 ...

  9. 洛谷 2577 [ZJOI2005]午餐——序列dp

    题目:https://www.luogu.org/problemnew/show/P2577 可以从只有一个窗口的角度思考出一个贪心结论.就是应当按吃饭时间(不算打饭时间)从大到小排序.这样交换相邻两 ...

  10. Poj1007_DNA Sorting(面向对象方法)

    一.Description One measure of ``unsortedness'' in a sequence is the number of pairs of entries that a ...