[让CSS更规范]流体布局

摘自《精通CSS:高级Web标准解决方案》

流体布局的尺寸是用百分数而不是像素，能够相对于浏览器窗口进行伸缩。即随着浏览器窗口变大，列变宽。相反，随着窗口变小，列的宽度减小。流体布局可以非常高效地使用空间，最好的流体布局甚至不会引起用户的注意。

但是流体布局也有缺点。在窗口宽度小的时候，行变得非常窄，很难阅读。在多列布局中尤其如此。因此，有必要添加以像素或em为单位的min-width，从而防止布局变得太窄。与之相反，如果设计跨越浏览器窗口的整个宽度，那么行就变得太长，也很难阅读。可以采取几个措施来避免这个问题。首先，不要跨越整个宽度，而是让容器只跨越宽度的一个百分比，比如85%。还可以考虑用百分数设置填充和空白边。这样的话，填充和空白边的宽度将随着窗口尺寸而变，防止列太快地变得过宽。最后，对于非常严重的情况，也可以选择以像素设置容器的最大宽度，以防止内容在大显示器上变得极宽。

注意，Windows上的IE5.x错误地相对于元素的宽度（而不是父元素的宽度）来计算填充。因此，以百分数

设置填充会在这些浏览器中产生不一致的结果。在应用流体布局之前建立一个基本的(X)HTML框架。

  ...

  ...

  ...

  ...

  ...

首先，将容器宽度设置为窗口总宽度的百分数。在这个示例中，我选择85%，因为这会在一定的屏幕尺寸范围中产生比较好的效果。接下来，将导航和内容区域的宽度设置为容器宽度的百分数。经过几次尝试之后发现，将导航区域设置为23%、将内容区域设置为75%会产生比较好的效果。这在导航和内容区域之间留出2%的视觉隔离带，这可以防止任何舍入错误和宽度差错破坏布局：

#wrapper {
  width: 85%;
}
#mainNav {
  width: 23%;
  float: left;
}
#content {
  width: 75%;
  float: right;
}

然后需要设置内容区域中列的宽度。这需要点儿技巧，因为内容div的宽度基于内容元素的宽度，而不是整个容器。如果希望secondaryContent的宽度与主导航相同，那么需要计算出容器宽度的23%是内容区域宽度的百分之多少。将23（导航宽度）除以75（内容区域的宽度），再乘以100，结果是大约31%。希望两个内容列之间的隔离还宽度与导航和内容区域之间的隔离带相同。使用同样的方法计算出大约3%，这意味着主内容区域的宽度应该是66%：这产生一个最适合1024*768分辨率的流体布局，但是在更大和更小的屏幕分辨率上阅读起来也比较舒服。

#mainContent {
  width: 66%;
  float: left;
}
#secondaryContent {
  width: 31%;
  float: right;
}

因为这个布局会恰当地伸缩，所以不需要添加max-width属性。但是，对于小尺寸，内容会太窄，所以可以在容器元素上设置最小宽度为720像素。