弹性+固宽布局（2）
作者：by0001 来源：冰极峰博客 时间：2009-05-15 12:19:00
为了演示效果，我们加入一些其它颜色调置，最后的样式如下所示：
*{margin:0;padding:0;}
html, body, #wrapper {height: 100％;font-size:12px;}
#wrapper{width:100％;background:#777;}
body > #wrapper {height:auto; min-height:100％;}
#main {padding-bottom: 54px;min-width:960px;}/* 必须使用和footer相同的高度,最小宽度ie6中加JS解决 */
#header{text-align:center;color:#fff;background:#333;}
#inheader{width:960px;height:110px;line-height:110px;margin:0 auto;background:#CC9933;}
h3{font-size:14px;line-height:50px;}
#inheader p{font-size:12px;line-height:30px;}
#footer {
position: relative;
margin-top: -54px; /* footer高度的负值 */
height: 54px;/* footer高度*/
width:100％;
min-width:960px;/*最小宽度ie6中加JS解决*/
clear:both;
background:#666;
text-align:center;
color:#fff;
}
#infoot{height:54px;line-height:54px;width:960px;margin:0 auto;background:#CC9966;}
#footer p{line-height:26px;}
#content{background:#999;width:960px;margin:0 auto;height:692px;}
#content p{line-height:30px;padding:0 30px;color:#fff;}
/*说明: 需要注意的就是#main的padding值、footer的高度和负margin值，需要保持一致。下面是著名的万能float闭合Clearfix Hack*/
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1％;}
.clearfix {display: block;}
/* End hide from IE-mac */
测试demo：
运行代码框
标签：布局,浏览器,兼容,分辨率
0
投稿猜你喜欢
使用pandas 将DataFrame转化成dict
2022-08-11 17:46:33
Python 循环读取数据内存不足的解决方案
2022-02-25 17:32:17
使用python爬取taptap网站游戏截图的步骤
2021-09-17 07:44:34
python 进程 进程池 进程间通信实现解析
2022-07-05 07:38:28
2021年最新版Python安装及使用教学
2022-09-18 08:24:00
python接口,继承,重载运算符详解
2023-03-08 05:51:38
Python(Tornado)模拟登录小米抢手机
2021-09-03 16:15:03
NumPy 基本切片和索引的具体使用方法
2023-02-11 20:47:50
Python 微信爬虫完整实例【单线程与多线程】
2023-08-19 23:12:58
WEB标准与XHTML 1.0 Transitional等文档类型介绍
2007-10-20 21:18:00
Python基础之getpass模块详细介绍
2021-03-06 13:47:13
ASP和SQL结合处理时间应用
2008-06-09 15:15:00
python完成FizzBuzzWhizz问题(拉勾网面试题)示例
2022-01-31 14:41:11
Python3监控疫情的完整代码
2023-09-24 09:53:19
返回首页的链接地址写法
2008-10-22 13:38:00
numpy.random模块用法总结
2023-05-11 00:48:19
Python获取暗黑破坏神3战网前1000命位玩家的英雄技能统计
2023-09-25 13:01:40
python模块之paramiko实例代码
2022-08-08 08:34:51
python使用tqdm模块处理文件阅读进度条显示
2022-09-08 11:29:17
Python类的动态修改的实例方法
2021-07-03 12:16:15