自适应布局分两类：高度和宽度，方法有很多，我用三列布局举例，我就列几个通俗易懂的例子呗，懂了三列的，两列的原理一样，呵呵哒。
效果图如下：高度自适应——宽度自适应
1,高度自适应布局
原理就是把每个模块设置为绝对定位，然后设置中间自适应的模块的top和bottom属性的值分别为头部模块和底部模块的高，然后中间模块的高度就自适应了。代码如下：
立即学习“前端免费学习笔记（深入）”；
html代码：
120px自适应120px
css代码：
.top{ width: 100%; height: 120px; position: absolute; background-color: greenyellow; }.main{ position: absolute; width: 100%; top: 120px; bottom: 120px; background-color: azure; height: auto;}.bottom{ position: absolute; bottom: 0;//别漏了 width: 100%; height: 120px; background-color:greenyellow ;}
2,宽度自适应，有三种方法，分别是用绝对定位；利用margin，中间模块先渲染；自身浮动。
a，用绝对定位来设置宽度自适应布局，原理：针对自适应模块使用绝对定位，在把left和right设置为左右两列的宽，其实原理和高度自适应一样，另外左右两列分别左右浮动。
高端网络建设公司设计类网站模板 IT互联网移动建站类网站源码(带手机版数据同步)本套模板采用现在非常流行的全屏自适应布局设计，且栏目列表以简洁，非常时尚大气。后台支持可视拖拽编辑。 模板特点：1、手工书写DIV+CSS、代码精简无冗余。2、自适应结构，全球先进技术，高端视觉体验。3、SEO框架布局，栏目及文章页均可独立设置标题/关键词/描述。4、后台直接修改联系方式、传真、邮箱、地址等，修改更加方
html代码：
200px自适应200px
css代码：
html,body { margin: 0; height: 100%; padding: 0; font-size: 30px; font-weight: 500; text-align: center;}.left,.right { width: 200px; display: inline; height: 100%; background-color: greenyellow;}.left { float: left;}.right { float: right;}.main { position: absolute; left: 200px; right: 200px; height: 100%; background-color: azure; display: inline;} b，中间一列优先渲染的自适应三列布局，优先渲染（加载）的关键：内容在html里面必须放在前面。自适应的div必须放在left和right前面且包含在一个父div里。父div，left和right模块都向左浮动，然后对自适应的div（就是父div里的子div）设置margin：0 200px，然后对left的margin-left的属性值设置为100%的负数，就是margin-left：-100%；对right的margin-left的属性值设置为自身宽度的负数，就是margin-left：-200px。
注意：自适应的div必须放在left和right前面且包含在一个父div里。
html代码：
自适应200px200px
css代码：
html,body { margin: 0; height: 100%; padding: 0; font-size: 30px; font-weight: 500; text-align: center;}.main { width: 100%; height: 100%; float: left;}.main .content { margin: 0 200px; background-color: azure; height: 100%;}.left,.right { width: 200px; height: 100%; float: left; background-color: greenyellow;}.left { margin-left: -100%; //important}.right { margin-left: -200px; //important} c，自身浮动，原理：中间列设置margin属性，就是把左右列分别左右浮动。注意：使用这个方法布局自适应的话，必须把自适应的那一列在html中放在left和right后面。
html代码：
200px200px自适应
css代码：
html,body { margin: 0; height: 100%; padding: 0; font-size: 30px; font-weight: 500; text-align: center;}.main { margin: 0 200px; height: 100%; background-color: azure;}.left,.right { width: 200px; height: 100%; background-color: greenyellow;}.left { float: left;}.right { float: right;}
