典型的三排两排中高度自适应布局

如何在中间，使整个页面内容，如何适应内容自动扩展。学习CSS布局，这是最常见的问题，给出一个实际的例子，下面详细解释。（本文的经验是由蓝色理想论坛公司和郭双讨论）。

首先，你可以先看到实际运行效果。在Mozilla、Opera和IE浏览器中，这个页面既可以是中心的，也可以是高度自适应的：

完整的代码

体{
背景：# 999；
文本对齐：中心；
颜色：# 333；
字体：宋体、Verdana、无衬线字体；
}
#头{
宽度：776px；
保证金：汽车；
左缘：自动；
填料：0px；
背景：# Eee；
身高：60px；
文本对齐：左对齐；
#含有{ }
保证金：汽车；
左缘：自动；
宽度：776px；
# mainbg { }
宽度：776px；
填料：0px；
背景：# 60a179；
浮点数：左；
}
#右{
浮子：右边；
保证金：2px 0px 2px 0px；
填料：0px；
宽度：574px；
背景：# ccd2de；
文本对齐：左对齐；
}
#左{
浮点数：左；
保证金：2px 2px 0px 0px；
填料：0px；
背景：# f2f3f7；
宽度：200px；
文本对齐：左对齐；
}
#页脚{
清楚：两者；
宽度：776px；
保证金：汽车；
左缘：自动；
填料：0px；
背景：# Eee；
身高：60px；}
{ margin: 0px；。文本填充：20px；}

头

＜div
类=文本> right11111

左

页脚

代码分析
首先，我们定义的身体和在顶部的第一行#头。关键是文本对齐：正文在中间，空白右边：自动在页眉和左边。自动提示：事实上，文本对齐的定义：中心一直集中在伊江，但它在Mozilla中是无效的。余量：在Mozilla中需要自动实现中心。

其次，定义两列在左侧中间#权和#。为了让中间两柱为中心，我们建立了一层#包含外面设置保证金：自包含，所以#右和左#自然中心。

注意两个列定义的顺序在中间，我们首先定义#权，通过浮动权；让它浮在#右侧有层。然后重新#左，通过浮动：左；让它浮在#右层的左边。这是完全相反的顺序从左到右（更正我们以前的形式：第一，左、右、左、右），可以根据自己的需求进行设计。

我们看到，一层# mainbg嵌套之间的#包含在代码中的两列。这个层是做什么的这一层是用来定义#背景包含。你一定会问，你为什么不定义背景直接在#包含有多层设置这是因为背景是直接定义在#包含不在Mozilla所示，和高度值必须被定义。如果高度值的定义，正确的#层不会根据内容可以实现自动化的可扩展性。为了解决背景和高度的问题，它是要添加这样一个# mainbg层。关键是，# mainbh层定义浮动：左；因为浮使层自动有一个宽和高属性。（那一刻明白了：）

最后，在底部的#页脚层的定义，这个定义的关键是明确的：无论是；这句话的功能是取消的#页脚层浮动继承。否则，你会发现#页脚是执着于#标题显示不正确，在#。

主层的定义和布置好的。补充一点：你看我也定义了种A.文字{ margin: 0px；padding: 20px；}，类的作用是对内容的外围做为20px的空白。为什么我们不确定保证金或填料直接#吗因为Mozilla和IE不同意CSS盒子模型。边距/填充直接定义了Mozilla中的布局失真，我一般使用内部单层方法来解决它。