footer居底
结构部分:
<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居底的更多相关文章
- CSS 五种方式实现 Footer 置底
CSS 五种方式实现 Footer 置底 页脚置底(Sticky footer) 就是让网页的footer部分始终在浏览器窗口的底部. 当网页内容足够长以至超出浏览器可视高度时,页脚会随着内容被推 ...
- CSS五种方式实现 Footer 置底
页脚置底(Sticky footer)就是让网页的footer部分始终在浏览器窗口的底部.当网页内容足够长以至超出浏览器可视高度时,页脚会随着内容被推到网页底部:但如果网页内容不够长,置底的页脚就会保 ...
- footer置底
html代码: <div class="container"> <div cass="header"></div> < ...
- 【html】【8】div布局[子div在父div居底]
从今天起 开始细话div布局 思路及要点: 父div的位置设置成相对的,即“position: relative;”. 而子div的位置设置成绝对的,并且下边缘设为0,即“position: ab ...
- Vue-footer始终置底
需求:当页面高度不足一屏时需要footer固定显示在页面底部,而页面内容超过一屏时需要footer紧跟在页面内容的最后. 思路:通过获取 网页可见区域高度:document.body.clientHe ...
- css div要点汇总
1.子元素选择两种 h1 strong{color:red}意思是所有后代只要是strong就变成红色 h1>strong{color:red}效果同上但只对第一代后代元素有效 相邻兄弟元素 h ...
- css - 紧贴底部的页脚
有的时候,由于页面长度不够,页面底部的页脚会很尴尬的跑上来,如图: 有的同学可能会想用position:fixed;bottom:0;来永远居底.但有些场景确实不适合. 这是我从YII2中找到的简单解 ...
- iOS小知识:使UIButton中的图片和文字实现左对齐
UIButton setImage 和 setTitle之后,默认的 image和title 对齐方式是居中, 由于 title 长度不固定,所以如果要几个这样有image有title的按钮纵向排列对 ...
- 通过jquery js 实现幻灯片切换轮播效果
观察各个电商网址轮播图的效果,总结了一下主要突破点与难点 1.->封装函数的步骤与具体实现 2->this关键字的指向 3->jquery js函数熟练运用 如animate 4-& ...
随机推荐
- PF_RING安装
1.安装Build-essential.SVN.Flex.Libnuma-dev.bison ubuntu中:sudo apt-get install build-essential subversi ...
- 获取屏幕分辨率(C/C++)
C/C++获取屏幕分辨率的方法 int main(int argc, char* argv[]) { // 需要添加头文件: // #include <Windows.h> system( ...
- mariadb日志学习笔记
MySQL日志: 查询日志:query log 慢查询日志: 查询执行时长超过指定时长的查询操作所记录的日志 slow query log 错误日志:包含了服务器启动和关闭的正常信息 二进制日志:包含 ...
- azure注册码
用户名:aaa 注册秘钥:2GQrt5XHYY7SBK/4b22Gm4Dh8alaR0/0k3gEN5h7FkVPIn8oG3uphlOeytIajx 注册用户名:www.yuanxingku.com ...
- 单个input框上传多个文件操作
HTML页面: <div class="form-group thumb"> <label class="control-label col-xs-12 ...
- php变量那些事:php引擎对变量声明、存储简要分析(ZVAL)
php中变量有三个基本的特性: 1.变量符号.也就是变量的名称.形象比喻,kv中的key.这个有php引擎的符号表(hash表)管理. 2.变量类型.一个php变量可以是boolean.integer ...
- [C#] Extension Method 扩展方法
当我们引用第三方的DLL.或者Visual Studio自己的库的时候,或许会发现这样的一个情况,如果这个类型有一个XX的方法就好了.这时候我们可以用到扩展方法,是我们的代码更加灵活和高效. 这里我举 ...
- Android的ADT内容助手快捷方式设置
请注明出处:http://www.cnblogs.com/killerlegend/p/3550019.html Written By KillerLegend 先将Word Completion的 ...
- Tomcat工作原理
http://www.cnblogs.com/shootercheng/p/5838645.html
- Pycharm 使用 (一)
学习[Python基础教程]到后面的练习阶段就觉得python自带的IDLE有点out的感觉,于是就在网上搜索好用的IDE, 挺多人推荐Pycharm的 不仅跨平台而且还支持django等框架; 初次 ...