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-& ...
随机推荐
- sql server2005 实现读写分离
下面我们重点介绍Sql Server 2005是如何实现负载均衡的. Sql Server 2005的新特性 端到端拓扑的事务性复制 SQL Server 2005对端到端(P2P)拓扑结构上事务性的 ...
- 软件工程 speedsnail 第二次冲刺2
20150519 完成任务:划线第二天,能画出一条直黄线: 遇到问题: 问题1 划线的代码和移动的setcontentview冲突,无法同时显示 解决1 没有解决 明日任务: 线与移动共存
- [leetcode]_Pascal's Triangle
题目:题目本身不存在问题,生成Pascal三角. 注意: ArrayList的使用: 1.ArrayList申请二维数组. ArrayList<ArrayList<Integer>& ...
- silverlight 退出系统(关闭当前网页),通过调用JS
确认后直接退出系统,关闭当前页面 页面部分: <HyperlinkButton x:Name="LinkExit" Style="{StaticResource L ...
- Cassandra 数据模型 (基于CQL,解决胖列数量限制及灵活性问题)(1.1及以上版本)
文中主要交代Cassandra的编程模型及数据结构. 由于Cassandra版本数次更新,网上中文的资料已经有点过时,比较有代表性的比如ebuy那篇文章都已经过时了,于是自己找资料,结合官方博客写一篇 ...
- 关键字替换排除HTML标签属性字符
解决办法: 1.打开文件e/class/functions.php 2.找到函数 ReplaceKey($newstext,$classid=0) 3.找到替换代码 if(STR_IREPLACE) ...
- 生产WCF客户端类文件的命令格式
生产WCF客户端类文件的命令格式: svcutil.exe net.tcp://127.0.0.1:8732/ChromaMI.Remote.ConfigService/RemoteConfigSer ...
- 每天进步一点--c#基础巩固,事件、委托
要想技术有所提高,就是把有些问题真正的弄懂弄明白,我从事C#开发两年了,一直对事件委托等概念一知半解,有时候博客园上看看别的大牛的文章,看看懂了就过去了,时间长了又忘了,真正理解还是要自己动手弄些例子 ...
- 关于 mvc 中 连字符 - 和下划线 _转换的问题。
[潜水]大崔||哈尔滨(759666247) 10:02:16 如图 C#不承认 “-”[知府]古道今-湖北\xig<systemobject@126.com> 10:03:54 ...
- POJ-1579
#include <stdio.h> #include <stdlib.h> ][][]; int w(int a,int b,int c){ ||b<=||c<= ...