结构部分:

<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. The given path's format is not supported.

    问题 编程以来今本没有使用input[type=file]这个控件过,今天突然使用尽然报错了,在本地chrome,firefox等其他的浏览器都是好的,唯独ie报错了.在服务器的时候,尽然chrome ...

  2. MongoDB(1):常用操作命令大全

    MongoDB常用操作命令大全(转) http://www.jb51.net/article/48217.htm 成功启动MongoDB后,再打开一个命令行窗口输入mongo,就可以进行数据库的一些操 ...

  3. redis 配置文件解读

    # Redis 配置文件 # 当配置中需要配置内存大小时,可以使用 1k, 5GB, 4M 等类似的格式,其转换方式如下(不区分大小写) # # 1k => 1000 bytes # 1kb = ...

  4. mybatis使用笔记

    关于动态SQL里的条件查询(if test): 1.lombok插件和mybatis插件在有些变量名下会冲突,比如一个变量为rType的字段,lombok插件认为应该是getRType,但是mybat ...

  5. PHP文件上传错误类型及说明

    从 PHP 4.2.0 开始,PHP 将随文件信息数组一起返回一个对应的错误代码.该代码可以在文件上传时生成的文件数组中的 error 字段中被找到,也就是 $_FILES['userfile'][' ...

  6. 从PC跳转至wap

    <script language="JavaScript">function mobile_device_detect(url){var thisOS=navigato ...

  7. 对于java反射的理解

    java中的反射是一种强大的工具,它能够创建灵活的代码,这些代码可以在运行时装配,无序在组件之间进行链接. 反射允许在编写与执行时,使程序代码能够接入装载到JVM的类的内部信息,而不是源代码中选定的类 ...

  8. udev/raw/asmlib/多路径 配置asm

    asmlib 是linux上面给磁盘/分区头上面打上asm的标记,供asm使用,而且当磁盘的盘符发生改变的时候,不会影响到asm disk,从效果上说,和udev没有本质区别,在redhat 4和5中 ...

  9. pure的bug记录2

    <select id="stacked-state" style=" font-family: "Microsoft YaHei"; " ...

  10. Android Studio添加aar包依赖

    1.将aar包考入需要依赖的模块的libs目录下 2.在需要依赖的模块的build.gradle中添加如下内容: dependencies { compile(name:'aar包名不带扩展名', e ...