作者：李宇
链接：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. MySql的CURRENT_TIMESTAMP

    在创建时间字段的时候 DEFAULT CURRENT_TIMESTAMP表示当插入数据的时候,该字段默认值为当前时间 ON UPDATE CURRENT_TIMESTAMP表示每次更新这条数据的时候, ...

  2. 2018-01微信小程序--直播

    一. 小程序直播支持的格式 目前小程序支付两种格式直播 1) flv格式直播 2) rtmp格式直播 二. 能够开通小程序直播的行业类目 由于直播需要资质, 并不是每个企业都能够开通小程序直播, 微信 ...

  3. requirejs 使用实例r.js打包

    在这里,请先看基础文章与相关技术文档: 安装: npm init npm install requirejs --save npm install jquery@1.11.1 --save 创建基本目 ...

  4. Windows10 + Visual Studio 2017环境为C++工程安装使用ZMQ

    因为需要用 C++ 实现联机对战的功能,但是不想直接用 winsock ,因此选了ZMQ 框架(不知道合不合适).安装的过程还是挺艰辛的.但是也学到了些东西,记录一下.另外,Zmq 的作者 Piete ...

  5. Markdown文本的学习

    大标题 小标题 小小标题 小小小标题 萌啊萌啊萌 斜体 萌啊萌啊萌 粗体 萌啊萌啊萌 又粗又斜 萌啊萌啊萌 我是分割线 p.s. 标准Markdown换行要打两个空格 短代码 #include < ...

  6. 【UOJ#246】套路（动态规划）

    [UOJ#246]套路(动态规划) 题面 UOJ 题解 假如答案的选择的区间长度很小,我们可以做一个暴力\(dp\)计算\(s(l,r)\),即\(s(l,r)=min(s(l+1,r),s(l,r- ...

  7. LOJ#6277. 数列分块入门 1

    分块思想,先把原来的序列分成根号n快,然后对于更新的部分,先操作这个序列边上的部分,然后再中间部分整块操作,这样复杂度就是O(根号N) #include<map> #include< ...

  8. centos7/RHEL7下快速搭建DNS域名解析服务器

    应用场境:此处搭建的DNS(Domain Name Server)更加偏向于企业内部需要一个域名服务器专门用来解析自己局域网内定义的域名: 比如:app1.company.com, app2.comp ...

  9. C语言学习记录之一

    1. while语句 2. 循环嵌套 3. 数组 4. 排序 1. while 由于上节课时间有限,介绍完for循环后没有来得及讲while语句.简单来讲,while也是一种循环结构,先看一个例子: ...

  10. 算法练习：求字符串的最长重复子串(Java实现)

    1. 求字符串的最长重复子串 例如:aaaaaaaaabbbbcccaaassscvvv这里面的最长重复子串为aaaaaaaaa 算法思路:算法时间复杂度(O(n)) 1. 将这一个字符串先转成cha ...