作者:李宇
链接:https://www.zhihu.com/question/23220983/answer/25880123
来源:知乎
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

这个是css中比较经典的问题。

这里固定在底部包括两种情况,第一种是当页面内容尚未填充满的时候,页脚需要固定在底部,第二种是页面填充满后,页脚需要随页面内容的增加而填充在主体内容的下方。

由于受书写模式的影响,一般情况下无法直接将一元素置于垂直的某一位置,除非使之脱离普通流。而脱离普通流后就很难满足第二种要求,这种情况下也可借助js进行计算进行定位,但这种效果可能由于计算时间和浏览器渲染的问题发生跳动(没亲自试过)。因此,这里提供一种比较通用的,基于普通文档流的解决方法。

具体解决方案:直接来代码。

<html>
<head>
<style type="text/css">
html,body{height:100%}
.footer {margin-top:-30px;height:30px;background-color:#eee;}
.wrap{min-height:100%}
.main{padding-bottom:30px;overflow:hidden;}
</style>
</head>
<body>
<div class="wrap">
<div class="main">这里是网页的主体</div>
</div>
<div class="footer">这里是页脚</div>
</body>
</html>

思路就是创建一个足够大的容器wrap包含整个网页,并将footer挤到底端,通过设置margin-top:-30px使之上浮,并在main中设置padding-bottom使之能够容下页脚而不重叠。

 
https://www.zhihu.com/question/23220983

固定footer在底部的更多相关文章

  1. HTML中footer固定在页面底部的若干种方法

    <div class="header"><div class="main"></div></div> <d ...

  2. 网站设计:将Footer固定在浏览器底部

    在设计网站的时候,如果你某个页面的内容没有满屏,那你的footer会离浏览器底部很远,整体看起来很难看,这里用JavaScript提供一种方法来将footer固定在浏览器底部. function fi ...

  3. 让footer固定在页面底部(CSS-Sticky-Footer)

    让footer固定在页面底部(CSS-Sticky-Footer)     这是一个让网站footer固定在浏览器(页面内容小于浏览器高度时)/页面底部的技巧.由HTML和CSS实现,没有令人讨厌的h ...

  4. 【转载自W3CPLUS】如何将页脚固定在页面底部

    该文章转载自:W3CPLUS 大漠的文章 http://www.w3cplus.com/css/css-sticky-foot-at-bottom-of-the-page 以下为全文 作为一个Web的 ...

  5. 将HTML页面页脚固定在页面底部(多种方法实现)

    当一个HTML页面中含有较少的内容时,Web页面的footer部分随着飘上来,处在页面的半腰中间,给视觉效果带来极大的影响,接下来为大家介绍下如何将页脚固定在页面底部,感兴趣的朋友可以了解下 作为一个 ...

  6. 如何将页脚固定在页面底部,4中方法 转载自:W3CPLUS

    原博客地址:http://www.w3cplus.com/css/css-sticky-foot-at-bottom-of-the-page 作为一个Web的前端攻城师,在制作页面效果时肯定有碰到下面 ...

  7. 始终让footer在底部

    1.footer保持在页面底部 需求: 我们希望footer能在窗口最底端,但是由于页面内容太少,无法将内容区域撑开,从而在 footer 下面会留下一大块空白 第一种方法:采用 flexbox布局模 ...

  8. 原生 table css实现操作按钮固定右侧及底部滚动 IE不会卡死

    需求的表格比较复杂(各种合并新增删除),elementUi的table组件无法满足需求,故而写了原生table,且与其他用了table组件的表格保持一致. 贴一下简单的代码,只实现操作按钮固定右侧以及 ...

  9. 页面元素固定在页面底部的纯css代码(兼容IE6)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. django.core.exceptions.AppRegistryNotReady: Apps aren't loaded yet.

    报错现象 django 启动的时候报错 django.core.exceptions.AppRegistryNotReady: Apps aren't loaded yet. 报错解决 记不清是我有毛 ...

  2. MT【297】任意四边形的一个向量性质

    在平面四边形$ABCD$中,已知$E,F,G,H$分别是棱$AB,BC,CD,DA$的中点,若$|EG|^2-|HF|^2=1,$设$|AD|=x,|BC|=y,|AB|=z,|CD|=1,$则$\d ...

  3. python学习日记(数据结构习题)

    元素分类 有如下值li= [11,22,33,44,55,66,77,88,99,90],将所有大于 66 的值保存至字典的第一个key中,将小于 66 的值保存至第二个key的值中.即: {'k1' ...

  4. 【刷题】LOJ 556 「Antileaf's Round」咱们去烧菜吧

    题目描述 你有 \(m\) 种物品,第 \(i\) 种物品的大小为 \(a_i\) ​,数量为 \(b_i\)​( \(b_i=0\) 表示有无限个). 你还有 \(n\) 个背包,体积分别为 \(1 ...

  5. 自学Aruba集锦

    自学Aruba集锦 01 自学Aruba之功率单位和相对单位 02 自学Aruba之无线频段---ISM频段及UNII频段 03 自学Aruba之2.4GHz及5GHz无线信道 04 自学Aruba之 ...

  6. neutron相关知识

    Neutron 对虚拟三层网络的实现是通过其 L3 Agent (neutron-l3-agent).该 Agent 利用 Linux IP 栈.route 和 iptables 来实现内网内不同网络 ...

  7. Gym-100451B:Double Towers of Hanoi

    题目链接 题目大意:把汉诺双塔按指定顺序排好的最少步数 我写这题写了很久...终于发现不dp不行 把一个双重塔从一根桩柱移动到另一根桩柱需要移动多少次? 最佳策略是移动一个双重 (n-1) 塔,接着移 ...

  8. POJ--2104 K-th Number (主席树模版题)

    题目链接 求区间第k大 #include<iostream> #include<cstring> #include<algorithm> #include<v ...

  9. 解题:NOI2018 你的名字(68pts暴力)

    题面 rt,如果省选没退役就补 SAM的优势:简单明了 先建S的SAM并标记所有节点,之后每次询问直接把T按广义SAM的方法插上去,统计新加的节点到根的状态代表的本质不同子串数,减掉被标记的部分就是T ...

  10. 【LOJ6284】数列分块8

    题目大意:维护一个序列,支持区间染色,查询区间中等于某个颜色的点的个数. 题解:考虑直接用线段树进行维护,维护区间相同颜色值和一个区间颜色是否相同的标记即可. 代码如下 #include <bi ...