让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中使用xlrd、xlwt操作excel
python 对 excel基本的操作如下: # -*- coding: utf-8 -*- import xlrd import xlwt from datetime import date,dat ...
- CSS动画之transition属性
transition 属性 简介 transition(过渡)) 是指从一个状态到另一个状态的变化.比如当鼠标在某个元素上悬停时,我们会修改它的样式,采用 transition 可以创建一个平滑的动画 ...
- php中date() 函数
实例 格式化本地日期和时间,并返回格式化的日期字符串: <?php // Prints the day echo date("l") . "<br>&q ...
- 苹果CMS
本篇将主要讲解使用过程中普遍遇到的“问题”,这些问题并非是BUG,通常是需要我们自己去注意的一些点.(会结合用户反馈持续补充)http://www.maccms.com/doc/v10/faq.htm ...
- java当拿到一个项目后该怎么看的一些个人见解(附带快捷键)
刚出来实习,BOSS让我用maven下载架包后进行修改. 刚开始拿到项目两眼一黑,完全不知道该怎么下手.想找server层,完全不知道在那么多架包那里开始弄. 这个时候首先要明确你要修改的位置,找到这 ...
- Linux 下的终端
终端: 1 虚拟终端 ctrl + alt + F(1-6) : ctrl + alt + F7 : 图形终端 启动图形终端 : Gnome : #startx 或者 #startx &am ...
- C++中如何实现像Java中接口功能--C++抽象类(纯虚函数，虚函数)
在Java中定义个接口,之后可以定义不同的类来实现接口,如果有个函数的参数为这个接口的话,就可以对各自的类做出不同的响应. 如: interface animal { public void info ...
- python的functools.partial的应用
functools.partial是类似于创造“可移动”函数的意思,参数的第一个是函数名,其他的是这个函数其他参数,例如: generator_func = functools.partial( tf ...
- jqGrid的subGrid子表格
使用完整jqGrid作为子表格 使用子表格,涉及到jqGrid的三个选项: subGrid :首先必须将jqGrid的subGrid选项设置为true,默认为false:当此项设为true的时候,Gr ...
- windows API 第13篇 MoveFileEx
上一篇介绍了MoveFile,这次分析MoveFileEx,它是MoveFile的扩展函数,功能还要更加强大些.先看定义: BOOL WINAPI MoveFileEx( _In_ LPCTS ...