全兼容的全屏自适应布局
Posted ＜/script＞
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了全兼容的全屏自适应布局相关的知识，希望对你有一定的参考价值。
1.原理
body, html高度等到全屏高度
使用position:absolute;的方式来定义最外层的div, 内层的div 可以通过height:100%来渲染高, 这样就可以说不用在js的帮助下来实现全立屏的自适应布局
关于兼容 ie6 采用让body的上内边距等到 top 层的高度, 下内边距等到 bottom 层的高度, 通过这样的效果达到中间层高度等height:100%的效果
内层 inner-box 的高度在 ie67 无法实现height:100%的效果, 因为如果在 ie67 下 父层的在 高度不确定、position:absolute 的情况下，子层height:100%无法实现
上面提到 ie6 是采用 body的内边距的方式实现的, 所以
*height:expression(document.getElementById(‘content‘).offsetHeight+"px"); //来兼容ie7 内层 高度无法100%的问题,当然 * 是针对ie67的, 同样就ie6有效
上句的代码是利用父层的高度来赋值给子层, 所以在ie6也是没问题的。
2.代码
<!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" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> <style type="text/css"> /* 全屏自适应布局 */ html,body{width:100%;height:100%;overflow:hidden;margin:0;} /*让ie6 的内边距 */ html{_height:auto;_padding:100px 0 50px;} .top,.content,.foot{position:absolute;left:0;} .top,.foot{width:100%;} .content{top:100px;bottom:50px;_height:100%;overflow:auto;} .top{top:0;height:100px; background:#f00;} .content{_position:relative;right:0;_top:0;_left:0; background:#000;} .foot{height:50px; bottom:0; background:#f56;} .inner-box{ height:100%; background:#faa; *height:expression(document.getElementById(‘content‘).offsetHeight+"px"); } </style> </head> <body> <!-- 头 --> <div class="top"></div> <!-- 中间 --> <div class="content" id="content"> <!-- 内容 --> <div class="inner-box"> </div> </div> <!-- 底 --> <div class="foot"></div> </body> </html>
3.作用
通常采用这种布局的方式是针对一些 后台管理系统 的网页来使用的, 减少js resize事件的调用, 对用户友好, 也防止在渲染的时候由于js非常大, 造成的网页出现空白的问题。
以上是关于全兼容的全屏自适应布局的主要内容，如果未能解决你的问题，请参考以下文章