`
mutongwu
  • 浏览: 439007 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

页面布局：分5个区域

 
阅读更多 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script type="text/javascript">
</script>
<style type="text/css">
*{margin:0;padding:0;}
body{width:100%;height:100%;overflow:hidden;}
.viewPort{position:absolute;width:100%;height:100%;overflow:hidden;}
.top,.bottom,.left,.right,.inner{border:1px solid blue;}
.top{position:absolute;height:100px;width:100%;}
.bottom{position:absolute;bottom:0;height:100px;width:100%;}

.left{position:absolute;width:100px;height:100%;}
.right{position:absolute;width:100px;right:0;height:100%;}
.content{position:absolute;top:100px;bottom:100px;width:100%;
_height: expression(documentElement.clientHeight-200); }

.inner{position:absolute;left:100px;right:100px;height:100%;
_width: expression(documentElement.clientWidth-200); 
}
.hideTop .top{display:none;}
.hideTop .content{top:0;}

.hideBottom .bottom{display:none;}
.hideBottom .content{bottom:0;_height: expression(documentElement.clientHeight-100); }

.hideLeft .left{display:none;}
.hideLeft .inner{left:0;_width: expression(documentElement.clientWidth-100);}
.hideRight .left{display:none;}
.hideRight .inner{right:0;_width: expression(documentElement.clientWidth-100);}
</style>
</head>
<body style="">
<div class="viewPort hideBottom">
	<div class="top">top</div>
	<div class="bottom">bottom</div>
	<div class="content">
		<div class="inner">
			xxxx
		</div>
		<div class="right">right</div>
		<div class="left">left</div>
	</div>
</div>
</body>
</html>
分享到：
| 右下角弹窗
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics