<!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. LeetCode 883 Projection Area of 3D Shapes 解题报告

    题目要求 On a N * N grid, we place some 1 * 1 * 1 cubes that are axis-aligned with the x, y, and z axes. ...

  2. mysql拼接sql的语法concat()用法

    之前写了oracle拼接sql是用“||”,那么mysql也有自己的拼接的语法concat() concat()的基本语法是如下: 括号内的拼接内容语法和python中拼接显示字符串和变量.常量时一样 ...

  3. 【Python爬虫】PyQuery解析库

    PyQuery解析库 阅读目录 初始化 基本CSS选择器 查找元素 遍历 获取信息 DOM操作 伪类选择器 PyQuery 是 Python 仿照 jQuery 的严格实现.语法与 jQuery 几乎 ...

  4. 【生产问题】记还原一个很小的BAK文件，但却花了很长时间，分析过程

    [生产问题]还原一个很小的BAK文件,但却花了很长时间? 关键词:备份时事务日志太大会发生什么?还原时,事务日志太大会怎么办? 1.前提: [1.1]原库数据已经丢失,只有这个bak了 [1.2]ba ...

  5. 什么是url？

    什么是URL? URL是统一资源定位器(Uniform Resource Locator)的缩写,也被称为网页地址,是因特网上标准的资源的地址. URL举例 http://www.sohu.com/s ...

  6. 打开Delphi 10.1 berlin提示脚本错误的解决方法

    HKEY_CURRENT_USER\SOFTWARE\Embarcadero\BDS\18.0\Known IDE Packages $(BDS)\Bin\CommunityToolbar240.bp ...

  7. SUDO安全委派和安全模块

    sudo更换身份 su  切换身份   使用su 切换身份必须首先直到被切换成用户的密码   如: su root  就必须要知道root的密码 这种机制安全性不高,容易泄露管理员密码 1. sudo ...

  8. 前端框架之Vue(7)-事件处理

    监听事件 可以用 v-on 指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码. 示例: <div id="example-1"> <butt ...

  9. vue-自定义pc端键盘-动画

    <template> <div class="keyboard"> <div class="keyboard_key"> & ...

  10. Java 基础 变量和运算符

    Java基础语法   第1章 变量 1.1 变量概述 1.2 计算机存储单元 1.3 基本类型之4类8种 1.4 常量与类型 1.5 定义变量(创建变量) 1.6 变量使用的注意事项 1.7 数据类型 ...