html中用div做框架的代码,CSS网页实例 利用box-sizing实现div仿框架结构实现代码
[参与测试的浏览器:IE6 / IE7 / IE8 / FF3 / OP10 / SF4 / Chrome2 ]
[操作系统:Windows]
先看代码:
利用box-sizing实现div仿框架
* { 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;}
top
side
main
bottom
提示:您可以先修改部分代码再运行
关键部分:
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下,的box-sizing默认值本就是border-box(注:IE7有一点点不正常,overflow:hidden后神志有所恢复,将不影响本demo正常运作)。、
现在的问题就是是不是要采用这个方法了,给点优劣的对比,大家自行斟酌吧:
比较使用绝对定位的方法来实现,这个方法在目前主要存在两个优势:
针对每种浏览器基本使用的同一方法,css代码简单,易修改、易理解。
兼容。绝对定位的方法在OP10下存在暂时找不着修复bug的办法,只好绕个弯走了。
它最大的劣势就是欠灵活,如果没有IE6,我想我是坚决选择绝对定位的方法的。
以下为应用实例demo。
利用box-sizing实现div仿框架
* { 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;}
top
side
bottom
提示:您可以先修改部分代码再运行
一个应注意的问题:
不要给body以overflow:hidden,它将会无情地隐藏掉任何在它以外的任何东西,包括top/bottom(header/footer);
一个应理解的要点:
[100%+(N)px] 的高度产生的方法:div { height:100%; padding-top:(N)px;}。
html中用div做框架的代码,CSS网页实例 利用box-sizing实现div仿框架结构实现代码相关推荐
- vue动态获取css样式,Vue 框架之动态绑定 css 样式实例分析
今天的小实例是关于 Vue 框架动态绑定 css 样式,这也是非常常用的一个部分 首先说一下 动态绑定,相对的大家都知道静态绑定,静态绑定的话,直接加 class=""就可以了,使 ...
- 背景的css代码,CSS网页设计实例:设计制作大背景网页_css
网页制作Webjx文章简介:如何用css实现大背景网页设计. 自从我发布了大背景网页设计合集之后,我收到了很多电子邮件询问如何用css实现大背景的网页设计.因此我决定和大家分享大背景网站的设计技巧.在 ...
- html中用div做框架的代码,用div和css做框架
就是这个样子咯
- php中表格间距代码,css:border-spacing属性(表格边框间距)的示例代码分享
我们知道表格加入边框默认情况下是如下图那样的: 我们在上一节讲解了如何合并表格边框(消除表格边框间距).但是在实际开发中,我们有可能要设置一下表格边框的间距. 在CSS中,我们使用border-spa ...
- 054.CSS网页布局
文章目录 一.网页布局方式 二.标准流 三.浮动流 (一)浮动流相关概念 1.什么是浮动流? 2.什么是脱离文档流? 3.什么是半脱离文档流? (二)如何使用浮动流 1.浮动元素贴靠问题 2.浮动元素 ...
- python利用asyncore的端口映射(端口转发)的代码
如下代码是关于python利用asyncore的端口映射(端口转发)的代码. import socket,asyncore class forwarder(asyncore.dispatcher): ...
- html5对代码自动排版,HTML5系列:通过JS+DIV+CSS排版布局实现选项卡效果
CSS介绍及布局特点 层叠样式表是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言. CSS目前最新版本为CSS3,是能够真正做到网页表现 ...
- 隐藏展开的html代码,CSS隐藏div盒子及html内容方法
Html中怎么使用CSS样式隐藏内容,又不影响代码功能使用. 我们常常想隐藏一些内容,比如网站添加第三方统计显示的图标,如何通过CSS隐藏,但又不影响网站统计:怎么让图片作为背景,但文字又不显示,如何 ...
- php 影院选座js代码,在react中用canvas做一个电影院选座功能
又到了每日分享了.这次分享的是:在react中用canvas做一个电影院选座功能. 前言:项目采用create-react-app脚手架,就是做了一个效果所以只有一个页面但是也用了react-rout ...
最新文章
- 高性能NoSql数据库 SSDB
- 【每日一算法】两个列表的最小索引总和
- .NET,你忘记了么?(二)——使用using清理非托管资源
- 用BusyBox制作Linux根文件系统
- Python学习笔记(5):Python如何忽略warning的输出
- 大工17秋《计算机文化基础》在线测试1,奥鹏大工15秋《计算机文化基础》在线测试1答案...
- (转)基于Metronic的Bootstrap开发框架经验总结(6)--对话框及提示框的处理和优化...
- 编号001!华为超级旗舰入网:获中国首张5G手机“身份证”
- 最爱的城市(dfs)
- 【实践】Embedding在腾讯应用宝的推荐实践
- python 装饰器粗浅理解
- 挑战杯获奖作品_我校学生参加河北省“挑战杯”竞赛获奖作品展示二
- java 异常捕捉 ( try catch finally ) 清晰解释
- css radio 垂直居中显示,CSS表单元素垂直居中完美解决方案
- [转] Web前端开发工程师常用技术网站整理
- pm2开启nuxt项目pm2 start ./node_modules/nuxt/bin/nuxt-start
- 苹果CMS自动定时采集教程
- AutoCAD安装及激活
- 嵌入式UI架构设计漫谈
- http:网易云音乐