作者：李宇
链接：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. Gym - 101848C Object-Oriented Programming （树链剖分+线段树+动态开点）

    C. Object-Oriented Programming time limit per test 3.0 s memory limit per test 1024 MB input standar ...

  2. HAOI2017 简要题解

    「HAOI2017」新型城市化 题意 有一个 \(n\) 个点的无向图,其中只有 \(m\) 对点之间没有连边,保证这张图可以被分为至多两个团. 对于 \(m\) 对未连边的点对,判断有哪些点对满足将 ...

  3. BSGS算法及扩展

    BSGS算法 \(Baby Step Giant Step\)算法,即大步小步算法,缩写为\(BSGS\) 拔山盖世算法 它是用来解决这样一类问题 \(y^x = z (mod\ p)\),给定\(y ...

  4. 让自己的网站实现在线编辑office文档

    我们可以通过Office Web Apps(OWA)来实现在线编辑word,excel,power point, one note,并集成到自己的网站里去.   1 准备工作 1.1 操作系统 安装了 ...

  5. luogu4728 双递增序列 (dp)

    设f[i][j]表示以i位置为第一个序列的结尾,第一个序列的长度为j,第二个序列的结尾的最小值 那么对于f[i][j],有转移$f[i+1][j+1]=min\{f[i+1][j+1],f[i][j] ...

  6. luogu3953 [NOIp2017]逛公园 (tarjan+dijkstra+记忆化搜索)

    先跑一边dijkstra算出从1到i的最短距离dis[i] 然后建反向边 从n开始记忆化搜索,(p,k)表示1到p的距离=dis[p]+k的方案数 答案就是$\sum\limits_{i=0}^{k} ...

  7. 在JSON中遇到的一些坑

    今天在进行压测的时候,由于需要使用到json进行传参,并且需要在JMeter中加入少量的JSON,由于JSON在java中呈现键值对的形式,并且需要使用到“”来修饰,导致只能使用\进行转义,在发送请求 ...

  8. CodeForces - 95B（DFS）

    题目链接:http://codeforces.com/problemset/problem/95/B 题目大意:给你一个正整数n (1 ≤ n ≤ 10100000),求不大小于它的超级幸运数字(超级 ...

  9. 洛谷P1173 [NOI2016]网格

    这个码量绝对是业界大毒瘤...... 300行,6.5k,烦的要死...... 题意:给你一个网格图,里面有0或1.你需要把一些0换成1使得存在某两个0不四联通.输出最小的换的数量.无解-1. n,m ...

  10. python 当前时间获取方法

    1.先导入库:import datetime 2.获取当前日期和时间:now_time = datetime.datetime.now() 3.格式化成我们想要的日期:strftime() 比如:“2 ...