让footer始终待在页面底部
1、把html和body的height属性设为100%;保证content的高度能撑满浏览器;
2、把#content的高度也设置为100% ，但是这里我们使用了“min-height”属性，而不是的height属性，这是因为如果#main中的内容如果增加了，他的高度超过了浏览器窗口的高度，那么如果把#content的高度仍然是100%，就会导致#footer仍然定位在浏器窗口的下端，从而遮盖了#content中的内容。
3、将#content设置为相对定位，目的是使他成为它里面的#footer的定位基准然后把#foooter设置为绝对定位，并使之贴在#main的最下端。
注意，如果当我们把#footer贴在#content的最下端以后，他实际上已经和上面的#main这个div重叠了，为了避免覆盖#main中的内容，我们在#main中设置了下侧的padding，使padding-bottom的值等于#footer的高度，就可以保证避免覆盖#main的文字了。
<style>
body,html {
margin: 0;
padding: 0;
height:100%;
}
#content {
min-height:100%;
position: relative;
}
#main {
padding: 10px;
padding-bottom: 60px;
}
#footer {
position: absolute;
bottom: 0;
padding: 10px 0;
width: 100%;
}
#footer h1 {
font: 20px/2 Arial;
margin:0;
padding:0 10px;
}
</style>
<body>
<div id="content">
<div id="main">
<h1>main</h1>
<p>你可以改变浏览器窗口的高度，来观察footer效果。</p>
<p>文字文字文字文字文字文字文字文字文字文字</p>
</div>
<div id="footer">
<h1>Footer</h1>
<div>
</div>
</body>
让footer始终待在页面底部的更多相关文章
- CSS + DIV 让页脚始终保持在页面底部
来源:David's Blog http://www.DavidQiu.com/ 文章链接:http://blog.davidqiu.com/post/2013-06-17/400517539 ...
- css让footer永远保持在页面底部
案例1:仅仅保存在页面底部.不固定. 思路: html: <div class="body"> <header>我是头部</header> &l ...
- 让footer始终位于页面的最底部
http://www.cnblogs.com/wudingfeng/archive/2012/06/29/2569997.html html代码: <div class="contai ...
- footer始终在页面最底部的方法（问题待检验）
一.css方法 <style type="text/css"> html,body{ height: 100%; } body{ display: flex; flex ...
- 记一些让footer始终位于网页底部的方法
上次说把网页的头部和尾部分离出来作为一个单独的文件,所有网页共用,这样比较方便修改,然而,,,我发现某些方法里尾部会紧跟在头部后面,把内容挤在下面..而且有的页面内容少的话不能把尾部挤到最下面,所以, ...
- div footer标签css实现位于页面底部固定
Web页面的“footer”部分随着飘上来,处在页面的半腰中间,给视觉效果带来极大的影响,让你的页面看上去很不好看,特别是现在宽屏越来越多,这种现象更是常见,本文将介绍两种解决方案,需要了解的朋友可以 ...
- 让footer固定在页面底部（CSS-Sticky-Footer）
让footer固定在页面底部(CSS-Sticky-Footer) 这是一个让网站footer固定在浏览器(页面内容小于浏览器高度时)/页面底部的技巧.由HTML和CSS实现,没有令人讨厌的h ...
- DIV+CSS:页脚永远保持在页面底部
页脚永远保持在页面底部 有时候,我们用CSS创建一个高度自适应布局,如何保证页脚(footer)在内容不超过一屏的情况下始终保持在布局最下方是一个比较头疼的事.我看过一些利用绝对定位的例子,但总感觉不 ...
- 【转载自W3CPLUS】如何将页脚固定在页面底部
该文章转载自:W3CPLUS 大漠的文章 http://www.w3cplus.com/css/css-sticky-foot-at-bottom-of-the-page 以下为全文 作为一个Web的 ...
随机推荐
- python 简单的图片比较
# by movie on 2019/12/18 from PIL import Image from PIL import ImageChops path1 = 'images/trumpA689. ...
- day1-字符串、列表
字符串操作: name = "Wills Qian" # 创建字符串变量 print(len(name)) # 打印字符串长度 print(name[0]) # 提取第一个字符W ...
- LUOGU P1654 OSU! (概率期望)
传送门 解题思路 首先考虑对于一个点来说,如果这个点是1的话,那么对于答案来说 $(ans+1)^3=ans^3+3*ans^2+3*ans+1$,这对于上一个答案来说其实贡献了 $3*ans^2+3 ...
- LUOGU P4777 【模板】扩展中国剩余定理（EXCRT）
传送门 解题思路 扩展 $crt$,就是中国剩余定理在模数不互质的情况下,首先对于方程 $\begin{cases} x\equiv a_1\mod m_1\\x\equiv a_2\m ...
- springboot与任务（定时任务）
描述: 项目开发中经常需要执行一些定时任务,比如需要在每天凌晨时候,分析一次前一天的日志信息.Spring为我们提供了异步执行任务调度的方式,提供TaskExecutor .TaskScheduler ...
- PHPstorm同步服务器代码的缺点---命名空间undefined
在把一个服务器的代码同步到phpstorm下开发的时候,发现新建的命名空间代码都失效了,然而换到 https://blog.csdn.net/afraid_to_have/article/deta ...
- https,http和ssl的关系
https,http和ssl这三者是什么关系呢? http是超文本传输协议,浏览器利用这一协议就可以访问各种网站了. ssl指Secure Sockets Layer 安全套接层,是一种保证网络数据传 ...
- 嵌入式开发—C语言面试题
嵌入式开发—C语言面试题 源地址:http://blog.csdn.net/xdx2ct1314/article/details/7358929 1. 用预处理指令#define 声明一个常数,用 ...
- sqlmap：wins系统+python3上安装
python2和python3互不兼容,SqlMap是基于python2的,所以SqlMap不支持python3,这里使用virtualenvwrapper切换python版本: 一.sqlmap的安 ...
- 在Linux中使用selenium（环境部署）
1.安装chrome 用下面的命令安装Google Chrome yum install https://dl.google.com/linux/direct/google-chrome-stable ...