最窄770px最宽1024px经典布局
最典型实用的上中下,并且中间分三列的布局,这个例子有2个特点:
1. 中间三列效果,可以任意实现单列背景色。
2. 整体最窄770px,最宽1024px,也就是说窗口小于770xp就出底部滚动条,如果大于1024px自动屏幕居中。
IE6.0和FF1.5测试通过
效果浏览
分析:
最外层的wrapper把所有内容都嵌套在里边,整体相对定位。max min已经很好的控制了最窄最宽值,但对IE没有作用。如果没有其他布局的穿插,这一层其实写在body内就可以,少一层嵌套。
#wrapper{ width:auto; border:1px solid #000; min-width:770px; max-width:1024px; text-align:left; margin-left:auto; margin-right:auto; position:relative;}
wrapper 下级的 outer header footer
其中header绝对定位,footer 相对定位;outer分别对左右有130px的外边距,这是兼容非IE的关键。
#outer{ margin-left:130px; margin-right:130px; background:silver; border-left:1px solid #000; border-right:1px solid #000; color: #000;}
#header{ position:absolute; top:0; left:0; width:100%; height:70px; line-height:70px; border-bottom:1px solid #000; overflow:hidden; background:#0ff; text-align:center; font-size:xx-large}
#footer { width:100%; clear:both; line-height:50px; border-top:1px solid #000; background:#ffc; color:#000; text-align:center; position:relative;}
outer 下级的 clearheader outerwrap right clearer
clearheader 用做填补header的空白,clearer 是一个常用的填充hack用法。
outerwrap 宽为什么是99%,而不是100%?因为他的上层outer有边框,100%宽再加2个边框象素就会撑大,FF有明显效果。
right 的处理很经典,IE下解析为定位,FF下则为浮动。负边距的处理也刚好使用上outer留出的空白。
#clearheader{ height:72px;}
.outerwrap { float:left; width:99%;}
#right {
position:relative;
width:130px; float:right; left:1px;
margin-right:-129px;
}
* html #right { margin-right:-130px; margin-left:-3px}
.clearer{ height:1px; overflow:hidden; margin-top:-1px; clear:both;}
outerwrap 内的 centrecontent left clearer 就很简单了,思路类似上边说明。
<!--[if gte IE 5]> 指定IE5.0及版本以上浏览器有效
使用expression方法实现对IE5.0及以上版本的宽度条件控制。
body {width:expression( documentElement.clientWidth < 770 ? (documentElement.clientWidth == 0 ? (body.clientWidth < 770 ? "770" : "auto") : "770px") : "auto" );}
#wrapper {width:expression( documentElement.clientWidth > 1024 ? (documentElement.clientWidth == 0 ? (body.clientWidth >1024 ? "1024" : "auto") : "1024px") : "auto" );}
开始只想搞清楚老外是如何实现居中min max的,没想到最后是expression,太失望了,其实这里使用脚本控制更好。另外,老外原文的 Min width of 800px 是错的,CSS定义就是770px,后来截屏确认也是770px。
总的来说这是一个很复杂的布局例子,融合了很多经典用法和定义,同时很传统和实用。类似的复杂布局,四层嵌套实现对于传统布局来说还是比较有优势的。
Referrence:
3 col layout with equalising columns and footer http://www.pmob.co.uk/temp/min-max-3col.htm
最窄770px最宽1024px经典布局相关推荐
- 网页最窄770px最宽1024px经典布局
网页最窄770px最宽1024px经典布局 作者:出处:天极网责任编辑: 龙犊 [ 2006-02-27 08:42 ] 网页最窄770最宽1024布局--最外层的wrapper把所有内容都嵌套在里边 ...
- 最窄770PX最宽1024PX经典布局[DIV+CSS]
最典型实用的上中下,并且中间分三列的布局,这个例子有2个特点: 1. 中间三列效果,可以任意实现单列背景色. 2. 整体最窄770px,最宽1024px,也就是说窗口小于770xp就出底部滚动条,如果 ...
- 最窄770px最宽1024px的经典布局研究
最窄770px最宽1024px的经典布局研究aAwTechFeel最典型实用的上中下,并且中间分三列的,这个例子有2个特点: 1. 中间三列效果,可以任意实现单列背景色.aAwTechFeel2. 整 ...
- html 左边固定右边自动,css经典布局之左侧固定大小右侧自动适应
本文作者:IMWeb 赛冷思 未经同意,禁止转载 最近学习了一种经典布局,固定左侧或右侧的宽度,另一侧自适应宽度,此种布局挺常用,尤其是像后台,大部分都是采用这种结构,还比如像订餐类的APP,进入商家 ...
- HTML经典布局之圣杯布局详解
圣杯布局预览如下 在遇到以下两个要求时(也是圣杯布局的特点),就需要使用到圣杯布局 三栏布局中,左栏和右栏需要固定宽,中间栏自动占满剩余宽度 要求中间栏优先渲染 示例代码如下,为了方便快速阅读和理解, ...
- 前端面试题 HTML5 CSS3(盒子模型、盒子水平垂直居中、经典布局) JS(闭包、深浅克隆、数据劫持和拦截) 算法(排序、去重、数组扁平化) Vue(双向数据绑定原理、通信方式)
前端面试题 HTML5 相关面试题 CSS3 相关面试题 盒子模型 盒子水平垂直居中的方案 经典布局方案 圣杯布局 双飞翼布局 flex布局 定位方式布局 css实现三角形 JS 相关面试题 8种数据 ...
- CSS经典布局--圣杯布局和双飞翼布局
圣杯布局与双飞翼布局,都是属于三列布局的经典布局. 双飞翼布局是圣杯布局的优化版,由淘宝UED提出: 它们的效果图类似,但是实现方法不同. 文章目录 一.圣杯布局和双飞翼布局的常规方法 1.圣杯 po ...
- R语言tidyr包spread()函数实战详解:数据裂变、从窄表到宽表
R语言tidyr包spread()函数实战详解:数据裂变.从窄表到宽表 目录 R语言tidyr包spread()函数实战详解:数据裂变.从窄表到宽表
- css经典布局——头尾固定高度中间高度自适应布局
今天说说一个经典布局:头尾固定高度中间高度自适应布局! 转文请标明 --- 出处:穆乙 http://www.cnblogs.com/pigtail/ 相信做过后台管理界面的同学,都非常清楚这个布局. ...
最新文章
- python随机选取列表中的一个字符串_如何从Python中的列表中选择随机字符串?
- 浅析开源数据库MySQL架构
- 基于Winsock API的VC网络编程实战
- Javaweb监听器(2)
- 人脸识别python face_recognize_【python+face_recognition】人脸识别初始
- QComboBox可以随意设置itemData的数值
- 零基础前端入门,真正难在哪里?简说编程思想和逻辑思维
- python办公自动化excel_python办公自动化:Excel操作入门
- python 迭代器 生成器_Python迭代器和生成器
- ie对象不支持“jggrid“属性或方法_8.2 location 对象
- 光盘勘误——《Visual C# 2005 程序开发与界面设计秘诀》
- 微信小程序检查版本更新并重启
- 离散数学考点之度序列简单图化
- 服务器部署Nodejs api 接口
- flash图片如何镜像翻转_Flash制作跳动的文字镜像效果
- 美国MaaS应用如何成功打入法国市场
- 论我是如何被自己搭建的聊天机器人气死的(自己的搞笑经历)
- EF CodeFirst 必须要解决的问题
- ThinkPHP 配置详解
- LocalDateTime生成当天、当月起止时间的时间戳
热门文章
- 固实压缩文件容易损坏_你不知道的压缩软件小技巧1
- linux内核 checksum,Linux内核分析 - 网络[十三]:校验和
- Win7安装.Net Framework 4.5.2失败最有效的解决方法
- 2020年“信创”火了!一文看懂什么是信创
- android studio将一个页面信息传送到另一个页面并显示
- java i=i++和j=i++的区别
- speedoffice(PPT)插入的图片如何自动适合幻灯片页面大小呢?
- kermit使用注意事项
- HTTPS 与 SSL
- 基于STM32的ESP8266使用教程(一)