纯CSS 贴底部的布局(兼容各个浏览器包括IE6)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8"/>
<style type="text/css">
html{height:100%;overflow:auto;}
body{margin:0;padding:0;position:relative;height:auto !important;height:100%;min-height:100%;text-align:center;}
.main{border-bottom:60px solid #f00;}
#footer{position:absolute;width:100%;clear:both;height:25px;border-bottom:1px solid blue;border-top:1px solid #e0e0e0;margin-top:20px;bottom:0;left:0;}
</style>
</head>
<body>
<div class="all">
<div id="topbar">菜单部分</div>
<div class="main">
我是主体,我是核心<br /><br /><br /><br />
虽然我是主体,但是你可以删除我其中的内容再看看我下面的页脚
</div>
<div id="footer">
我是安分守己的页脚,我只安静的待在页面的最下方
</div>
</div>
</body>
</html>
纯CSS 贴底部的布局(兼容各个浏览器包括IE6)的更多相关文章
- CSS 实现图片灰度效果 兼容各种浏览器
CSS 实现图片灰度效果 兼容各种浏览器如360浏览器 CSS实现图片灰度效果就是通过CSS样式让彩色图片呈现为灰色,相当于把一张图像的颜色模式调整为灰度,CSS可以通过以下几种方法来实现灰度效果. ...
- 纯CSS最小响应网格布局
lemonade.css是一个超级小的CSS可以帮助你创建一个完全响应和灵活自如的网格布局,包括所需网页的头部. 样式链接 <link rel= href=> HTML结构这样创建一个多列 ...
- 纯CSS实现三列布局(两边固定,中间自适应)
看了一些网上的案例,感觉较繁杂,于是,自己整理了一篇来说明这个东西. 也是给我自己复习吧,以前有人问道,我还没答上来呢.== 看代码: html: <div class="top&qu ...
- CSS美化 input type=file 兼容各个浏览器(转)
HTML代码: <FORM> <A class=btn_addPic href="javascript:void(0);"><SPAN>< ...
- 重温JavaScript获取CSS样式的方法(兼容各浏览器)
众所周知,CSS样式有三种类型:行内样式.内部样式和外部样式,JavaScript获取CSS样式时分为两种情况:行内样式获取法 和 非行内样式获取法 . 一.行内样式获取相对简单,通过element. ...
- DIV JS CSS 轻量级弹出层 兼容各浏览器
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- css透明度的设置 (兼容所有浏览器)
一句话搞定透明背景! .transparent_class { filter:alpha(opacity=); -moz-opacity:0.5; -khtml-opacity: 0.5; opaci ...
- CSS clear 清除浮动,兼容各浏览器
.clear:after{content:".";display:block;height:0;clear:both;visibility:hidden;} .clear{zoom ...
- 使用纯 CSS 实现 Google Photos 照片列表布局
文章太长,因为介绍了如何一步一步进化到最后接近完美的效果的,不想读的同学可以直接跳到最后一个大标题之后看代码.demo及原理就好,或者也可以直接看下面这个链接的源代码. 不过还是建议顺序读下去,因为后 ...
随机推荐
- Http权威指南笔记(二) Http状态码大全
100~199—信息状态码 200~299—成功状态码 客户端发请求时,这些请求通常都是成功的. 300~399—重定向状态码 重定向状态码告知客户端使用代替位置来访问他们所感兴趣的资源. 400~4 ...
- phpStorm注册马码
phpstorm已经升级到10.0,原注册码失效,10.0注册方法:注册时选择“License server”输入 http://idea.lanyus.com/ 此工具类工具一直没有让我失望
- 跳跃表 C#
虽然avl树和红黑树在数据搜索和排序方面都是有效的数据结构,但是都显得特别麻烦,跳跃表就显得特别简单,虽然简单 不影响他性能,在平均情况下,其插入.删除.查找数据时间复杂度都是O ...
- spark JavaDirectKafkaWordCount 例子分析
spark JavaDirectKafkaWordCount 例子分析: 1. KafkaUtils.createDirectStream( jssc, String.class, String.c ...
- SpringMVC(三) —— 参数绑定和数据回显
参数绑定的过程:就是页面向后台传递参数,后台接受的一个过程. 默认支持的参数类型:(就是你在方法上以形参的形式去定义一下的类型,就可以直接使用它) HttpServletRequest HttpSer ...
- java之方法覆盖的坑
昨天写了个小例子,覆盖hashCode.equals进行集合set的一些特性测试,代码如下: class Test3 { public int c; public Test3(int c) {this ...
- php输出json中文显示编码-解决办法
$str = "中华人民共和国";$ar = array( "a" => "a0", "b" => &quo ...
- linux 中ls命令函数
#include<stdio.h>#include<sys/types.h>#include<sys/stat.h>#include<dirent.h> ...
- Qt使用快捷键
在说快捷键之前先来说一个QtCreator调试的过程中经常发生的一个问题. 问题描述: 用QtCreator建立了一个纯C++的项目,但是在F5调试时,竟然提示ptrace不允许的操作,修改工程配置为 ...
- highcharts:根据Y的数值范围,动态改变图形的填充颜色
图形实例: 源代码如下: <!DOCTYPE html><html><head><meta charset="utf-8">&l ...