Div全屏幕自动伸缩非常适合做后台管理 (不兼容IE6)
2009-12-29 13:19
302 查看
自己根据需要写的一部分代码,参考了动网的后台的框架.
已经兼容以下最新的浏览器:
已经兼容以下最新的浏览器:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style type="text/css"> html, body { margin:0 auto; } .TopFram { background-color:#666; height:160px; overflow:hidden; z-index:1 } .MiddleFram { bottom:30px; right:0; position:fixed; left:0; top:160px; z-index:0; } .BottomFram { height:30px; overflow:hidden; width:100%; position:fixed; bottom:0px; background-color:#333; z-index:1 } .FramArea { border:none; bottom:0; display:block; height:auto; position:absolute; top:0; width:100%; height:100%; } .LeftFram { background-color:#CCC; display:block; float:left; position:relative; width:300px; height:100%; overflow:auto; z-index:0; margin:0 4px 0 0; padding:0; } .RightFram { background-color:#999; overflow:auto; height:100%; border:0 none; position:relative; z-index:0; margin:0; padding:0 } </style> <title></title> </head> <body> <div class="TopFram"> TopFram </div> <div class="MiddleFram"> <div class="FramArea"> <div class="LeftFram"> LeftFram </div> <div class="RightFram"> RightFram </div> </div> </div> <div class="BottomFram"> BottomFram </div> </body> </html>
相关文章推荐
- div停靠在屏幕右下角,兼容ie6,ie7,火狐等浏览器
- CSS问题1:div中 li宽度不固定 ie6和ie7不兼容不自动换行
- textarea 换行 (自动伸缩)|兼容ie6以上
- 兼容火狐的div自动伸缩
- div中 li宽度不固定 ie6和ie7不兼容不自动换行
- 弹出div屏幕居中,兼容ie6 ie7 firefox
- div停靠在屏幕右下角,兼容ie6,ie7,火狐等浏览器
- div+css 布局下兼容IE6 IE7 FF常见问题
- div错位解决IE6、IE7、IE8样式不兼容问题
- CSS的DIV背景图放置(兼容IE6)
- DIV+CSS解决IE6,IE7,IE8,FF兼容问题
- 用div和ul标签画表格进行布局兼容火狐、ie6、ie7、Opera等浏览器
- DIV+CSS相对IE6、IE7和IE8的兼容问题
- Css中实现两个DIV左右并排摆放,且自动按比例伸缩(示例)
- JS编写兼容IE6,7,8浏览器无缝自动轮播
- div最小高度的2种写法(兼容IE6、IE7、Firefox、Opera)
- 让div始终在页面底部,兼容IE6
- div在IE6与IE7下显示高度不兼容的问题
- div+css 常用两栏/三种自动适应宽度分栏 兼容ie6\7\8\9 火狐 谷歌等浏览器
- 网页布局,关于外层div不能随内层div自动伸缩的问题