页面布局：分5个区域

最新推荐文章于 2024-10-07 19:28:56 发布

iteye_12132

最新推荐文章于 2024-10-07 19:28:56 发布

阅读量1.7k

点赞数 1

分类专栏： DOM HTML CSS 文章标签： javascript java ViewUI

CSS 同时被 3 个专栏收录

35 篇文章 0 订阅

订阅专栏

DOM

30 篇文章 0 订阅

订阅专栏

HTML

5 篇文章 0 订阅

订阅专栏


<!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>