后台页面全屏自适应(典型布局)

最新推荐文章于 2023-03-06 14:06:30 发布

zhc1136

最新推荐文章于 2023-03-06 14:06:30 发布

阅读量3.1k

点赞数

文章标签：布局

本文链接：https://blog.csdn.net/zhouhc_forever/article/details/9885123

版权

<!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.leilay.com" title="Home" />
<title></title>
<style type="text/css">
* { margin:0; padding:0; list-style:none;}
html, body { height:100%; overflow:hidden;}
.top {
position:absolute; left:0; top:0; right:0;
height:100px;
background-color:#07c;
}
.side {
position:absolute; left:0; top:100px; bottom:32px;
width:160px;
overflow:auto;
background-color:#e1e2e3;
}
.main {
position:absolute; left:160px; top:100px; bottom:32px; right:0px;
width:auto;
background-color:#f4f5f6;
z-index:2;
}
.bottom {
position:absolute; left:0; bottom:0; right:0;
height:32px;
background-color:#456;
}
.main iframe {width:100%; height:100%;}
/*------ for ie6 ------*/
html { *padding:100px 0 32px 0;}
.top { *height:100px; *margin-top:-100px;}
.side { *height:100%; *float:left; *margin-right:-160px;}
.main { *height:100%; *margin-left:160px;}
.bottom { *height:32px;}
.top, .side, .main, .bottom {*position:relative; *top:0; *right:0; *bottom:0; *left:0;}
</style>
</head>
<body>
 <div class="top">
 </div>
 <div class="side">
 
 
 
 
 </div>
 <div class="main">
 
 
 
 
 </div>
 <div class="bottom">
 </div>
</body>
</html>

zhc1136

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
后台页面全屏自适应(典型布局)

.bottom { position:absolute; left:0; bottom:0; right:0; height:32px; background-color:#456;}.main iframe {width:100%; height:100%;}/*------ for ie6 ------*/html { *padding:100px 0 32px 0
复制链接

扫一扫