一般的门户网站都采用了一种典型的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清除浮动造成的父容器高度不会自动撑大的问题。
分享到：
相关推荐
两列布局中，以主列(main)是自适应宽度，子列(sidebar)是固定宽度的情形最为常见。今天就来好好探讨一下如何实现这种定宽+自适应的两列布局。 1. absolute + margin 方式 首先想到的是利用 absolute + margin 的方式...
标题中所涉及的知识点是如何使用CSS来实现左侧固定宽度，而右侧自适应宽度的布局设计。这在网页设计中是一种常见的需求，尤其是在构建分栏布局时。左侧通常用于导航菜单或固定栏，右侧则显示主要内容。描述部分提到...
前面已经介绍过单列定宽单列自适应的两列布局，而两列自适应布局是指一列由内容撑开，另一列撑满剩余宽度的布局方式。本文将从float、table和flex来介绍两列自适应布局的3种思路。 思路一: float 在单列定宽单列...
本示例探讨了如何使用HTML和CSS实现一个两列布局，其中左侧宽度固定，右侧则自适应剩余空间。以下是对这两种方法的详细解释： **实现一：利用浮动（Float）** 在第一种方法中，我们主要利用CSS的`float`属性来实现...
由于左右两列使用了浮动布局，它们会随着内容的增加而扩展，而`#container`和`#mainbg`的宽度固定，因此可以保证在任何情况下都能保持两列并排显示。 总的来说，这个布局实例巧妙地利用了CSS的浮动、居中对齐和内...
1. 固定宽度与自适应宽度布局：文件中提到的“左侧固定宽度，右侧自适应屏幕宽度”的布局是一个常见的布局需求。实现这种布局通常有两种方法，第一种是使用浮动（float）来控制左侧元素固定宽度，并使用 margin-left...
在描述中提到了两种不同的两列布局方式：右侧固定，左侧自适应宽度；以及左侧固定，右侧自适应宽度。 1. 右侧固定，左侧自适应宽度的布局： 在这个例子中，整体容器使用了一个`<div>`元素，并设置了`width:90%; ...
本文将详细介绍四种CSS方法来实现这种布局，即左列固定宽度，右列自适应宽度。 1. **使用绝对定位（Absolute Positioning）** 这种方法是通过设置`.side`为绝对定位，使其固定在左侧，然后设置`.main`的左边距（`...
1. 属性设置：在Interface Builder或代码中，你可以直接为UI元素添加约束，设定约束的属性包括：顶部、底部、左边、右边、宽度、高度以及中心对齐等。 2. Visual Format Language（VFL）：使用字符串来表示界面元素...
这些章节涵盖了固定宽度和自适应宽度的组合，如左右两列布局（一列固定，一列自适应）、双列居中等。利用浮动（`float`）和清除（`clear`）属性，可以创建复杂的并排布局。 五、导航菜单 第九至十四章重点讲述了...
本文将详细讲解如何使用CSS实现两列布局和三列布局，以及如何实现宽度和高度的自适应。 首先，我们来看一种基于BFC（块格式化上下文，Block Formatting Context）原理的三列布局方法。BFC是一个独立的渲染区域，它...
通过设置左右两列的宽度，以及浮动布局，可以使得左右列宽度固定，并且在内容上产生视觉上的对齐效果。如果右侧内容较左侧少很多，它会直接显示在左侧内容下方，实现高度自适应。 然而，需要注意的是，单纯的浮动...