一般的门户网站都采用了一种典型的960px的固定宽度布局，但现在的浏览器分辨率越来越大，有时候我们需要尽量利用屏幕的空间，特别是在做业务系统的时候。一种典型的场景是右边的导航栏固定宽度，而我们希望左边的宽度可以随着浏览器的宽度而自动适应。
我们可以用js轻易做到这一点，但是我们希望只用css，这样更简洁。下面就介绍一下如果通过css的负边距（negative margin）做到这一点。
首先看下面的代码：
以上代码的关键技术部分可以表述为：将一个宽度为100%的div的外边距（left-margin or right-margin）设置为某个负值，然后将其第一个子div的外边距（与父容器的边距同方向）设置为对应的正值，那么这个div就可以浮动并且自适应浏览器宽度。
这个例子还使用了一个css“hack”技术，那就是使用psuedo css清除浮动造成的父容器高度不会自动撑大的问题。
我们可以用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清除浮动造成的父容器高度不会自动撑大的问题。
2104
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
