结构部分:

<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. 深入浅出HTML与XHTML的区别

    HTML(HyperText Markup Language,超文本标记语言)最早的HTML官方正式规范,是1995年IETF(Internet Engineering Task Force,因特网工 ...

  2. 标签栏控制器(UITabBarController)

    一.标签栏控制器基础 1.绪论 a.一个标签栏是一个独立的界面对象,它经常与一个视图控制器(UITabBarController是UIViewController的子类)一起使用. b.一个标签栏项目 ...

  3. C#winform在textbox插入内容换行

    要让一个TextBox显示多行文本就得把它的Multiline属性设置为true,可是如果你是要把TextBox的Text属性设置多行文本时可能会遇到点麻烦,也许你会想到直接加一个换行符"\ ...

  4. SDUST 作业10 Problem D 魔方阵

    Description 所谓N阶魔方阵,是一个N*N的方阵,其元素由1到N^2组成,且方阵每行每列以及对角线的元素和相等.如三阶魔方阵: 8 1 6 3 5 7 4 9 2     魔方阵的规律如下: ...

  5. arguments .length .callee caller

    如果有一个函数像下面这样: function fn(){ } 那么fn这个函数下面就有一个arguments属性(你在逗我么,后面又说对象),该属性是个对象(typeof一下就知道了),然后它下面也有 ...

  6. linux下关于mysqldump备份的.sql导入数据库表数据丢失优化

    直切正题 前2个随笔做了linux下自动备份,但是备份的.sql文件发现表数据丢失,原因是数据库太大我的数据库文件是804M,在用ftp拉去也会丢失数据 所以对db.sh备份数据库加一个压缩gizp ...

  7. 自定义Toast的显示效果

    Activity: package com.example.editortoast; import android.app.Activity; import android.os.Bundle; im ...

  8. 倒水问题 (codevs 1226) 题解

    [问题描述] 有两个无刻度标志的水壶,分别可装x升和y升 ( x,y 为整数且均不大于100)的水.设另有一水缸,可用来向水壶灌水或接从水壶中倒出的水, 两水壶间,水也可以相互倾倒.已知x升壶为空壶, ...

  9. Requests:Python HTTP Module学习笔记(一)(转)

    Requests:Python HTTP Module学习笔记(一) 在学习用python写爬虫的时候用到了Requests这个Http网络库,这个库简单好用并且功能强大,完全可以代替python的标 ...

  10. Kindeditor小改动

    1.Flash上传时默认的大小为550*400,修改Kindeditor/plugins/flash/flash.js里的 self.plugin.flash内容,根据自己的页面直接设置默认大小,方便 ...