<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>footer固定到页面底部</title>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<style type="text/css">
html,body{margin:0;padding:0;height:100%}
.container{min-height:100%;height:auto !important;height:100%;/*ie6不识别min-height,如上述处理*/position:relative;}
.header{background:#ff0;padding:10px;}
.page{width:960px;margin:0 auto;padding-bottom:60px;/*padding等于footer的高度*/}
.footer{position:absolute;bottom:0;width:100%;height:60px;/*footer的高度*/background:#6cf;clear:both;}
.left{width:220px;float:left;margin-right:20px;background:lime;}
.content{background:orange;width:480px;float:left;margin-right:20px;}
.right{width:220px;float:right;background:green;}
.clearfix:after,
.clearfix:before{content:"";display:table}
.clearfix:after{clear:both;overflow:hidden}
.clearfix{zoom:1;}
</style>
</head>
<body >
<div class="container">
<div class="header">这是头部</div>
<div class="page clearfix">
<div class="left">left sidebar</div>
<div class="content">main content</div>
<div class="right">right sudebar</div>
</div>
<div class="footer">footer section</div>
</div>

</body>
</html>

css解决无论页面长短footer永远置底的更多相关文章

  1. 解决Popup StayOpen=true时，永远置顶的问题

    Popup设置了StayOpen=true时,会置顶显示. 如弹出了Popup后,打开QQ窗口,Popup显示在QQ聊天界面之上. 怎么解决问题? 获取绑定UserControl所在的窗口,窗口层级变 ...

  2. css让footer永远保持在页面底部

    案例1:仅仅保存在页面底部.不固定. 思路: html: <div class="body"> <header>我是头部</header> &l ...

  3. div footer标签css实现位于页面底部固定

    Web页面的“footer”部分随着飘上来,处在页面的半腰中间,给视觉效果带来极大的影响,让你的页面看上去很不好看,特别是现在宽屏越来越多,这种现象更是常见,本文将介绍两种解决方案,需要了解的朋友可以 ...

  4. 解决Web开发HTML页面中footer保持在页面底部问题

    如图所示如何实现footer在内容不足或者浏览器窗口变大变小的时候一直保持在底部呢?请看如下两种解决方案. 第一种方案: footer高度固定+绝对定位 (兼容性比较好完美兼容IE8+)思路:foot ...

  5. CSS 五种方式实现 Footer 置底

    CSS 五种方式实现 Footer 置底   页脚置底(Sticky footer) 就是让网页的footer部分始终在浏览器窗口的底部. 当网页内容足够长以至超出浏览器可视高度时,页脚会随着内容被推 ...

  6. CSS五种方式实现 Footer 置底

    页脚置底(Sticky footer)就是让网页的footer部分始终在浏览器窗口的底部.当网页内容足够长以至超出浏览器可视高度时,页脚会随着内容被推到网页底部:但如果网页内容不够长,置底的页脚就会保 ...

  7. 优化 html 标签 为何能用HTML/CSS解决的问题就不要使用JS？

    优化 html 标签 2018年05月11日 08:56:24 阅读数:19 有些人写页面会走向一个极端,几乎页面所有的标签都用div,究其原因,用div有很多好处,一个是div没有默认样式,不会有m ...

  8. Effective前端1：能使用html/css解决的问题就不要使用JS

    div{display:table-cell;vertical-align:middle}#crayon-theme-info .content *{float:left}#crayon-theme- ...

  9. [转]能用HTML/CSS解决的问题就不要使用JS

    原文链接:http://www.codeceo.com/article/html-css-not-js.html 为什么说能使用html/css解决的问题就不要使用JS呢?两个字,因为简单.简单就意味 ...

随机推荐

  1. DBCHART

    dbchart1.Series[0].DataSource := adoquery1; dbchart1.Series[0].XLabelsSource := 'aaaa'; dbchart1.Ser ...

  2. odoo 权限设置

    *权限管理的四个层次    # 菜单级别:不属于指定菜单所包含组的用户看不到该菜单,不客全,只是隐藏                 菜单,若知道菜单ID,仍然可以通过指定URL访问    # 对象级 ...

  3. SQL DATE_FORMAT() 函数

    参照原文:https://blog.csdn.net/moakun/article/details/82290387 DATE_FORMAT() 函数用于以不同的格式显示日期/时间数据 MySQL 使 ...

  4. ab压力测试工具的使用

    一.下载稳定版2.2.31 http://httpd.apache.org/ 二.2.2.*和2.4.*区别? httpd-2.2.x(prefork)    httpd-2.4.x(event) 编 ...

  5. java 线程 (一) Thread

    package cn.sasa.demo1; public class Test { public static void main(String[] args) throws Interrupted ...

  6. Orchard Core 模块化

    在上一篇文章谈到如何搭好一个基础的Orchard Core项目. 今天要尝试Orchard Core的模块化. 我自己的理解:一个系统可以分成一个个模块,这一个个模块是由一个个类库去实现的. 首先,在 ...

  7. CF718C Sasha and Array 线段树+矩阵加速

    正解:线段树 解题报告: 传送门! 首先这种斐波拉契,又到了1e9的范围,又是求和什么的,自然而然要想到矩阵加速昂 然后这里主要是考虑修改操作,ai+=x如果放到矩阵加速中是什么意思呢QAQ? 那不就 ...

  8. _CSS Hack

    CSS Hack: 不到万不得已,不要使用.不易于维护. 有一些情况,需要一段特殊代码在遇到特殊浏览器环境才执行,而在其他条件下,不执行. 此时,CSS Hack 就能实现. CSS Hack 实际上 ...

  9. oracle按照指定列分组合计group by rollup()

    group by rollup() 按分组合计 select grouping(status),status,owner,object_type,count(*) from dba_objects w ...

  10. 前端 chrome查看html样式基本操作

    Chrome浏览器是世界上HTML5支持最好的浏览器.提供了非常好的开发工具,非常适合我们开发人员使用.审查元素功能的快捷键是F12. 按检查或者F12 鼠标点击找标签 chorme审查元素的使用 - ...