博客园  :: 首页  :: 新随笔  :: 订阅 订阅  :: 管理

HTML 布局

Posted on 2013-04-15 11:11  PHP-张工  阅读(1117)  评论(1)  编辑  收藏  举报

布局特点：

顶部固定、导航菜单固定、底部永远处于页面底部。

代码如下：

<!DOCTYPE html>

<html>
<head>
	<title></title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<style type="text/css">
		html, body
		{
			padding:0;
			margin:0;
			height:100%;
			position:relative; 
		}
		#divHeader 
		{
			background-color:rgba(200,200,200,0.95);
			*background-color:#ddd;
			position:fixed;
			width:100%;
			height:50px;
			top:0px;
			outline:solid 5px rgba(200,200,200,0.6);
		}
		
		#divMain
		{
			padding-top:60px;
			padding-bottom:60px;
			padding-left:100px;
			background-color:white;
			_padding-top:10px;
			_padding-bottom:10px;
		}
		
		#divFooter 
		{
			background-color:#ddd;
			position:absolute;
			width:100%;
			height:50px;
			bottom:0px;
			_position:;
		}
		
		#divNav
		{
			width:90px; position:fixed; left:0px; top:60px; bottom:60px; overflow:auto;
			_position:absolute;
		}
		
		#divNav a
		{
			display:block;
			padding:3px;
			margin:0 3px;
			background-color:#eee;
		}
		
		#divNav a:hover
		{
			background-color:#aaa;
		}
	</style>
	<script type="text/javascript">
		function addContent()
		{
			for (var i = 0; i < 10; i++)
			{
				document.getElementById('divMain').innerHTML += 'CONTENT<br />';
			}
		}

		function resetContent()
		{
			document.getElementById('divMain').innerHTML = '';
		}
	</script>
</head>
<body style="background-color:#fff;">
<div style="position:relative; min-height:100%;">
<div id="divNav">
<a href="#">菜单1</a>
<a href="#">菜单1</a>
<a href="#">菜单1</a>
<a href="#">菜单1</a>
<a href="#">菜单1</a>
<a href="#">菜单1</a>
<a href="#">菜单1</a>
<a href="#">菜单1</a>
<a href="#">菜单1</a>
<a href="#">菜单1</a>
</div>
<div id="divHeader">
divHeader
<input type="button" value="add content" onclick="addContent();" />
<input type="button" value="reset content" onclick="resetContent();" />
</div>
<div id="divMain">
CONTENT<br />
CONTENT<br />
CONTENT<br />
CONTENT<br />
CONTENT<br />
CONTENT<br />
CONTENT<br />
CONTENT<br />
CONTENT<br />
CONTENT<br />
CONTENT<br />
CONTENT<br />
CONTENT<br />
CONTENT<br />
CONTENT<br />
CONTENT<br />
CONTENT<br />
CONTENT<br />
CONTENT<br />
CONTENT<br />
CONTENT<br />
CONTENT<br />
CONTENT<br />
CONTENT<br />
CONTENT<br />
CONTENT<br />
CONTENT<br />
CONTENT<br />
CONTENT<br />
CONTENT<br />
CONTENT<br />
CONTENT<br />
<div>
haha
</div>
</div>
<div id="divFooter">
divFooter<br />
divFooter<br />
</div>
</div>
</body>
</html>