关于HTML圣杯布局

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{margin:0;padding: 0;}
			body{min-width: 700px;}
			.top,.bottom{
				width: 100%;
				height: 50px;
				line-height: 40px;
				background-color: #539D26;
				margin: 0 auto;
				float: left;
			}
			.zhong{
				padding: 0 200px 0 200px;
				
				
			}
			.z,.left,.right{
				position: relative;
				float: left;
				min-height: 300px;
				
			}
			.z{
				background-color: #999999;
				width: 100%;
			}
			.left{
				width: 200px;
				background-color: #00FFFF;
				margin-left: -100%;
				left: -200px;
				
			}
			.right{
				width: 200px;
				background-color: #00FF00;
				margin-right: -200px;
				
				}
		</style>
	</head>
	<body>
		<div class="top">头部</div>
		<div class="zhong">
			<div class="z">zhonga<br /><br /><br /><br /><br /><br /><br />
			<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
			<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
			v<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
			<br /><br /><br /><br /><br /><br /><br /><br />asdasdasd
			</div>
			<div class="left">zuo</div>
			<div class="right">you</div>
			
		</div>
		<div class="bottom">尾部</div>
	</body>
</html>

上面是代码，打开后可以看到只有中间部分延长了，两侧不会跟着延长，我试过给左中右三个div设置height：100%，但是没用，如果要实现左中右三列延长的时候还能同步，要怎么设置？谢谢！

qq__8305

浏览 2039回答 2

2回答

随时随地看视频慕课网APP