左固定右自适应布局
这是一个很常见的布局，当然也可以实现右侧自适应，左侧自适应。比如常见的网页中，左侧导航栏是固定的，右侧的内容区要自适应浏览器的大小。
现在我们来看下HTML布局：
<div id="outer">
<div id="sidebar" style="height:240px;">固定宽度区</div>
<div id="content" style="height:340px;">自适应区</div>
</div>
<div id="footer">后面的一个DIV，以确保前面的定位不会导致后面的变形</div>
下面讲一下常见的方法：
1、将左侧div浮动，右侧div设置margin-left。
.sidebar{
width: 300px;
height: 300px;
background-color: pink;
float:left;
}
.content{
margin-left: 300px;
height: 100px;
background-color: blue;
}
.footer{
background-color: red;
}
.outer:after{
display: block;
content:'';
clear: both;
visibility: hidden;
}
.outer{
zoom:1;
}
大家要注意html中必须使用div标签，不要妄图使用什么p标签来达到目的。因为div有个默认属性，即如果不设置宽度，那他会自动填满他的父标签的宽度。这里的content就是例子。
当然我们不能让他填满了，填满了他就不能和sidebar保持同一行了。我们给他设置一个margin。由于sidebar在左边，所以我们设置content的margin-left值，值比sidebar的宽度大一点点——以便区分他们的范围。例子中是300.
假设content的默认宽度是100%，那么他设置了margin后，他的宽度就变成了100%-300，此时content发现自己的宽度可以与sidebar挤在同一行了，于是他就上来了。
而宽度100%是相对于他的父标签来的，如果我们改变了他父标签的宽度，那content的宽度也就会变——比如我们把浏览器窗口缩小，那wrap的宽度就会变小，而content的宽度也就变小——但，他的实际宽度100%-300始终是不会变的。
这个方法看起来很完美，只要我们记得清除浮动(这里我用了最简单的方法)，那footer也不会错位。而且无论content和sidebar谁更长，都不会对布局造成影响.
但实际上这个方法有个限制——html中sidebar必须在content之前！
如果siderbar当到了content后面，就会出现如下的效果：
但我需要sidebar在content之后！因为我的content里面才是网页的主要内容，我不想主要内容反而排在次要内容后面。
但如果sidebar在content之后，那上面的一切都会化为泡影。
可能有的人不理解，说你干嘛非要sidebar在后面呢？这个问题说来话长，反正问题就是——content必须在sidebar之前，但content宽度要自适应，怎么办？接着往下看。
2、固定区采用绝对定位，自适应区仍然设置margin。
CSS代码如下：
.sidebar{
width: 300px;
height: 300px;
background-color: pink;
position: absolute;
top:0;
left: 0;
}
.content{
height: 100px;
background-color: blue;
}
.footer{
background-color: red;
}
.outer{
position: relative;
}
可以发现，此时下面的红色div受影响了。其实这与footer无关，而是因为outer对sidebar的无视造成的。看来这种定位方式只能满足sidebar自己，但对他的兄弟们却毫无益处。
3、标准浏览器的方法
当然，以不折腾人为标准的w3c标准早就为我们提供了制作这种自适应宽度的标准方法。那就简单了：把outer设为display:table并指定宽度100%,然后把content+sidebar设为display:table-cell;然后只给sidebar指定一个宽度，那么content的宽度就变成自适应了。
对应的CSS代码
.sidebar{
width: 300px;
height: 300px;
background-color: pink;
display:table-cell;
}
.content{
height: 100px;
background-color: blue;
display:table-cell;
}
.footer{
background-color: red;
}
.outer{
display: table;
width:100%;
}
不过这种做法，如果sidebar写在content前面，sidebar会固定在左侧，否则固定在右侧。
HTML：
<div class="outer">
<div class="sidebar">
sidebar固定区域
</div>
<div class="content">
content自适应区域
</div>
</div>
<div class="footer">
后面的一个DIV，以确保前面的定位不会导致后面的变形
</div>
代码很少，而且不会有额外标签。不过这是IE7都无效的方法。
———————再说一点————————
如果不考虑ie7及以下版本，则使用标准方法；如果不在意sidebar与content的顺序，则用第一种方法；如果不考虑对其他兄弟元素的影响，用第3种方法。
以上代码都没在IE6测试，有问题不负责解释。让IE6寿终正寝的办法就是——从此不再理他。
左边定宽，右边自适应布局的几种方法
实际的页面开发中经常会遇到左边定宽，右边自适应的需求，特别是一些管理系统，比如左边显示信息或操作列表，右边显示详情，如下所示：、
针对这种布局，首先抽象出页面结构如下：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 * { 8 padding: 0; 9 margin: 0;10 color: #fff;11 font-size: 30px;12 font-weight: bold;13 text-align: center;14 box-sizing: border-box;15 }16 aside {17 width: 200px;18 height: 200px;19 padding-top: 75px;20 background: #5A6A94;21 }22 section {23 height: 200px;24 padding-top: 75px;25 background: #BE4F4F;26 }27 </style>28 </head>29 <body>30 <!-- 左边定宽 -->31 <aside class="left">Left</aside>32 <!-- 右边自适应 -->33 <section class="right">Right</section>34 </body>35 </html>
浏览器中效果：
需要实现的效果如下：
那么针对这种常见的布局，方式是非常多的，下面给出几种比较简单和常见的方法。
方法一：左边设置左浮动，右边宽度设置100%
【分析】这样的方式简单得让我怀疑，但是效果上确实是实现了。
方法二： 父容器设置 display：flex；Right部分设置 flex：1
【分析】display：flex; 设置为弹性盒子，其子元素可以通过设置 flex 的数值来控制所占空间的比例。
方法三：设置浮动 + 在 css 中使用 calc() 函数
【分析】
1. 浮动。（注意：为了不影响其他元素，别忘了在父级上清除浮动）
2. calc() = calc(四则运算) 用于在 css 中动态计算长度值，需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；
3. vw： viewport width。1vw = viewport 宽度的 1%, 100vw = viewport width,
同样的还有 vh： viewport height。1vw = viewport 高度的 1%， 100vh = viewport height。
浏览器支持情况： 主流浏览器、IE10+
vw 和 vh 会随着viewport 的变化而变化，因此十分适合于自适应场景来使用。
方法四：使用负margin
首先修改页面结构，为自适应部分添加容器 .container, 同时改变左右部分的位置，如下：
设置样式：
【分析】
1. 首先设置左边部分和右边部分左浮动，并为自适应部分（Right）设置宽度100%。此时的效果是这样的：
2. 设置左边部分左外边距为负100%，此时效果如下：
但是右边部分的宽度仍然为100%，部分内容被 Left 所覆盖。
3. 为 Right 部分添加左边距（即 Left 部分的宽度）
此时可以看到，Right 部分的内容居中显示了。