右方固定宽度+左边自适应宽度的两列布局方法

右边固定宽度+左边自适应宽度的两列布局方法
一般的门户网站都采用了一种典型的960px的固定宽度布局，但现在的浏览器分辨率越来越大，有时候我们需要尽量利用屏幕的空间，特别是在做业务系统的时候。一种典型的场景是右边的导航栏固定宽度，而我们希望左边的宽度可以随着浏览器的宽度而自动适应。

我们可以用js轻易做到这一点，但是我们希望只用css，这样更简洁。下面就介绍一下如果通过css的负边距（negative margin）做到这一点。

首先看下面的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>一边固定宽度和另外一边自适应宽度的布局</title>
<style type="text/css">
	body {
		padding: 0;
		margin: 0;
	}
	
	#wrapper {
		width: 960px;
		border: 1px solid #333;
		margin: 0 auto;
	}
	
	#nav {
		width: 200px;
		float: right;
	}
	
	#content-wrapper {
		margin-right: -200px;
		float: left;
		width: 100%;
	}
	
	#content {
		margin-right: 200px;
		padding: 0 10px;
	}
	
	.clearfix:after {
		height: 0;
		content: ".";
		display: block;
		clear: both;
		visibility: hidden;
	}
</style>
</head>
<body>
	<div id="wrapper" class="clearfix">
		<div id="content-wrapper">
			<div id="content">
				<p>
				中新网1月12日电(记者贾靖峰)中国银监会有关负责人12日表示，将在风险可控、商业可持续前提下支持保障性住房建设，他并透露，2010年11月末经济适用房开发贷款同比劲增逾三成，经济适用房个人购房贷款则年劲增逾四成，但保障性住房贷款仍存在“风险缓释不足、还款保障难以落实”等问题。
				</p>
								
			</div>
		</div>
		<div id="nav">
			<p>菜单1</p>
			<p>菜单2</p>
			<p>菜单3</p>
			<p>菜单4</p>
		</div>
	</div>
</body>
</html>

以上代码的关键技术部分可以表述为：将一个宽度为100%的div的外边距（left-margin or right-margin）设置为某个负值，然后将其第一个子div的外边距（与父容器的边距同方向）设置为对应的正值，那么这个div就可以浮动并且自适应浏览器宽度。

这个例子还使用了一个css“hack”技术，那就是使用psuedo css清除浮动造成的父容器高度不会自动撑大的问题。

右方固定宽度+左边自适应宽度的两列布局方法

相关推荐