结构部分:

<div class="container">
<div class="header">header</div>
<div class="center">
<p>我是个好人我是个好人我是个好人我是个好人</p>
<p>我是个好人我是个好人我是个好人我是个好人</p>
<p>我是个好人我是个好人我是个好人我是个好人</p>
<p>我是个好人我是个好人我是个好人我是个好人</p>
<p>我是个好人我是个好人我是个好人我是个好人</p>
<p>我是个好人我是个好人我是个好人我是个好人</p>
<p>猪猪猪猪猪猪猪猪猪猪猪猪猪猪猪猪猪猪猪猪猪猪猪猪猪猪猪猪猪猪猪猪</p>
</div>
<div class="footer">
<p>footerfooterfooterfooterfooterfooter</p>
</div>
</div>

样式部分:

.container{
position: relative;
min-height: 100%;
}
.center{
padding-bottom: 50px;
}
.footer{
position: absolute;
bottom: 0;
width: 100%;
height: 50px;
}

这样,可以保证footer部分永远居底,且不用借助js脚本。

footer居底的更多相关文章

  1. CSS 五种方式实现 Footer 置底

    CSS 五种方式实现 Footer 置底   页脚置底(Sticky footer) 就是让网页的footer部分始终在浏览器窗口的底部. 当网页内容足够长以至超出浏览器可视高度时,页脚会随着内容被推 ...

  2. CSS五种方式实现 Footer 置底

    页脚置底(Sticky footer)就是让网页的footer部分始终在浏览器窗口的底部.当网页内容足够长以至超出浏览器可视高度时,页脚会随着内容被推到网页底部:但如果网页内容不够长,置底的页脚就会保 ...

  3. footer置底

    html代码: <div class="container"> <div cass="header"></div> < ...

  4. 【html】【8】div布局[子div在父div居底]

    从今天起 开始细话div布局   思路及要点: 父div的位置设置成相对的,即“position: relative;”. 而子div的位置设置成绝对的,并且下边缘设为0,即“position: ab ...

  5. Vue-footer始终置底

    需求:当页面高度不足一屏时需要footer固定显示在页面底部,而页面内容超过一屏时需要footer紧跟在页面内容的最后. 思路:通过获取 网页可见区域高度:document.body.clientHe ...

  6. css div要点汇总

    1.子元素选择两种 h1 strong{color:red}意思是所有后代只要是strong就变成红色 h1>strong{color:red}效果同上但只对第一代后代元素有效 相邻兄弟元素 h ...

  7. css - 紧贴底部的页脚

    有的时候,由于页面长度不够,页面底部的页脚会很尴尬的跑上来,如图: 有的同学可能会想用position:fixed;bottom:0;来永远居底.但有些场景确实不适合. 这是我从YII2中找到的简单解 ...

  8. iOS小知识:使UIButton中的图片和文字实现左对齐

    UIButton setImage 和 setTitle之后,默认的 image和title 对齐方式是居中, 由于 title 长度不固定,所以如果要几个这样有image有title的按钮纵向排列对 ...

  9. 通过jquery js 实现幻灯片切换轮播效果

    观察各个电商网址轮播图的效果,总结了一下主要突破点与难点 1.->封装函数的步骤与具体实现 2->this关键字的指向 3->jquery js函数熟练运用 如animate 4-& ...

随机推荐

  1. phpQuery采集微信公众号文章乱码

    终于找到解决方案了,这是一个值得庆祝的事情.... 原来是因为微信在源码中加入了防采集代码<!--headTrap<body></body><head>< ...

  2. PHP学习之路 (2)

    我们如果坚持用windows做PHP开发,就会错误不断,所以,无论如何都要学习Linux的使用和安装.说实话<鸟哥的linux私房菜>是一本非常不错的书,但是如果你想照着书上面一步一步安装 ...

  3. android空鼠修改

    抛弃盒子自带遥控器后,又不满意改键红外遥控器,选择飞鼠及无线键鼠成为最终方案.问题是:菜单键如何实现!其实很简单:即插即用USB无线飞鼠及键鼠套装只涉及2个文件:system/usr/layout/G ...

  4. python网络画图——networkX

    networkX tutorial 绘制基本网络图 用matplotlib绘制网络图 基本流程: 1. 导入networkx,matplotlib包 2. 建立网络 3. 绘制网络 nx.draw() ...

  5. Oracle中查看无效的对象、约束、触发器和索引

    .检查无效的数据库对象: SELECT owner, object_name, object_type,status FROM dba_objects WHERE status = 'INVALID' ...

  6. 1.css的语法标准

    css(Cascading Style Sheets),中文名称为层叠样式表,主要用于对html的样式设置. 在使用CSS的时候,要注意其优先级情况,优先级由下所示(数字越高,优先级越高): 浏览器缺 ...

  7. linux 使用 pyodbc 访问 ms sqlserver 数据库

    一.安装linux下Sqlserver的驱动程序: 我们先来安装SqlServer的驱动程序,再安装ODBC相关的,目的是想尽快可以进行测试,因为在安装完Freetds之后,我们马上就可以在linux ...

  8. deep learning学习环境Theano安装(win8+win7)

    官网安装说明Installing Theano:http://deeplearning.net/software/theano/install.html#alternative-anacondace ...

  9. psql: 致命错误: 用户 "postgres" Ident 认证失败

    RedHat: 问题: psql -U postgres 时出现:psql: 致命错误:  用户 "postgres" Ident 认证失败 解决: 修改 /var/lib/pgs ...

  10. 宝马测试(C++实现)

       测试目的:对编辑器放大,缩小性能测试.      测试资源:一匹宝马.       测试结果:良好. 实现方法:通过调用本地保存的宝马文件,逐字逐行的显示在编辑器中,并放大,缩小.对不同的符号进 ...