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

zsuczw · 发表于 2013-2-7 23:40:20

一般的门户网站都采用了一种典型的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清除浮动造成的父容器高度不会自动撑大的问题。

		自动登录	找回密码
密码			立即注册