CSS网页实例利用box-sizing实现div仿框架结构实现代码-侯体宗的博客

CSS网页实例利用box-sizing实现div仿框架结构实现代码
前端 / 管理员发布于 7年前 437

[参与测试的浏览器：IE6 / IE7 / IE8 / FF3 / OP10 / SF4 / Chrome2 ]
[操作系统：Windows]
先看代码：

<!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=gb2312" /> <meta name="author" content="Chomo" /> <link rel="start" href="http://www.14px.com" title="Home" /> <title>利用box-sizing实现div仿框架</title> <style type="text/css"> * { margin:0; padding:0;} html { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; padding:100px 0; overflow:hidden;} html,body { height:100%;} .top { position:relative; margin-top:-100px; height:100px; background:#f60;} .side { position:relative; height:100%; background:#fc0; overflow:auto; width:200px; float:left; margin-right:0 !important; margin-right:-3px; overflow:auto;} .main { position:relative; overflow:auto; height:100%; background:#f30;} .bottom { position:relative; height:100px; background:#f60; clear:both;} </style> </head> <body> <div class="top"> top </div> <div class="side"> side </div> <div class="main"> main </div> <div class="bottom"> bottom </div> </body> </html>
提示：您可以先修改部分代码再运行

关键部分：

html { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; padding:100px 0; overflow:hidden;}

原理大概就是这样的：

千言万语抵不过一副画，通过整容前后的对比，大家应该能看出box-sizing:border-box的作用了。

了解box-sizing的同学们应该知道，它来自离微国比较遥远的css3世界，因此IE6/IE7是不支持的，但我很负责任滴说：本demo正常兼容IE6/IE7。

因为……

IE6/IE7下，<html>的box-sizing默认值本就是border-box（注：IE7有一点点不正常，overflow:hidden后神志有所恢复，将不影响本demo正常运作）。、

现在的问题就是是不是要采用这个方法了，给点优劣的对比，大家自行斟酌吧：

比较使用绝对定位的方法来实现，这个方法在目前主要存在两个优势：

针对每种浏览器基本使用的同一方法，css代码简单，易修改、易理解。
兼容。绝对定位的方法在OP10下存在暂时找不着修复bug的办法，只好绕个弯走了。

它最大的劣势就是欠灵活，如果没有IE6，我想我是坚决选择绝对定位的方法的。

以下为应用实例demo。

<!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" /> <meta name="author" content="Chomo" /> <link rel="start" href="http://www.14px.com" title="Home" /> <title>利用box-sizing实现div仿框架</title> <style type="text/css"> * { margin:0; padding:0;} html { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; padding:100px 0; position:relative; overflow:hidden;} html,body { height:100%;} .top { position:relative; margin-top:-100px; height:100px; background:#f60;} .side { position:relative; height:100%; background:#fc0; overflow:auto; width:200px; float:left; margin-right:0 !important; margin-right:-3px; overflow:auto;} .main { position:relative; overflow:hidden; height:100%; background:#f30; padding-top:100px; margin-top:-100px; top:50px; margin-left:200px; _margin-left:0; z-index:2;} .main iframe { height:100%; width:100%; background:#fff; position:absolute; left:0; top:0;} .bottom { position:relative; height:100px; background:#f60; clear:both;} </style> </head> <body> <div class="top"> top </div> <div class="side"> side </div> <div class="main"> <iframe frameborder="0" src="http://www.baidu.com/"></iframe> </div> <div class="bottom"> bottom </div> </body> </html>
提示：您可以先修改部分代码再运行

一个应注意的问题：

不要给body以overflow:hidden，它将会无情地隐藏掉任何在它以外的任何东西，包括top/bottom（header/footer）；

一个应理解的要点：

[100%+(N)px] 的高度产生的方法：div { height:100%; padding-top:(N)px;}。

上一条：
CSS样式表与HTML网页的关系分析
下一条：
IE6下CSS定义DIV高度的问题

0条评论 (评论内容有缓存机制,请悉知!)

最新最热

相关文章
使用 Alpine.js 排序插件对元素进行排序(0个评论)
在js中使用jszip + file-saver实现批量下载OSS文件功能示例(0个评论)
在vue中实现父页面按钮显示子组件中的el-dialog效果(0个评论)
使用mock-server实现模拟接口对接流程步骤(0个评论)
vue项目打包程序实现把项目打包成一个exe可执行程序(0个评论)

近期文章
在go语言中使用api.geonames.org接口实现根据国际邮政编码获取地址信息功能(1个评论)
在go语言中使用github.com/signintech/gopdf实现生成pdf分页文件功能(0个评论)
gmail发邮件报错:534 5.7.9 Application-specific password required...解决方案(0个评论)
欧盟关于强迫劳动的规定的官方举报渠道及官方举报网站(0个评论)
在go语言中使用github.com/signintech/gopdf实现生成pdf文件功能(0个评论)
Laravel从Accel获得5700万美元A轮融资(0个评论)
在go + gin中gorm实现指定搜索/区间搜索分页列表功能接口实例(0个评论)
在go语言中实现IP/CIDR的ip和netmask互转及IP段形式互转及ip是否存在IP/CIDR(0个评论)
PHP 8.4 Alpha 1现已发布！(0个评论)
Laravel 11.15版本发布 - Eloquent Builder中添加的泛型(0个评论)

近期评论
122 在
学历：一种延缓就业设计，生活需求下的权衡之选中评论工作几年后，报名考研了，到现在还没认真学习备考，迷茫中。作为一名北漂互联网打工人..
123 在
Clash for Windows作者删库跑路了，github已404中评论按理说只要你在国内，所有的流量进出都在监控范围内，不管你怎么隐藏也没用，想搞你分..
原梓番博客在
在Laravel框架中使用模型Model分表最简单的方法中评论好久好久都没看友情链接申请了，今天刚看，已经添加。..
博主在
佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 @1111老铁这个不行了，可以看看近期评论的其他文章..
1111 在
佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论网站不能打开，博主百忙中能否发个APP下载链接，佛跳墙或极光..

Top

CSS网页实例 利用box-sizing实现div仿框架结构实现代码

CSS网页实例利用box-sizing实现div仿框架结构实现代码