css实现右侧固定宽度，左侧宽度⾃适应
反过来也可以：左侧宽度固定，右侧⾃适应。不管是左是右，反正就是⼀边宽度固定，⼀边宽度⾃适应。
这种布局⽐较常见，博客园很多默认主题就是这种。⼀般情况下，这种布局中宽度固定的区域是侧边栏，⽽⾃适应的区域是主体内容区——相信把侧边栏搞成⾃适应的⼈很少吧？
要实现这种布局，也算⽐较简单。我们先给出html结构：
1 2 3 4 5 < id="wrap">
< id="sidebar">固定宽度区 </>
< id="content">⾃适应区 </>
</>
< id="footer">后⾯的⼀个DIV，以确保前⾯的定位不会导致后⾯的变形 </>
代码中的#wrap的div，是⽤来包裹我们要定位的这两个区的；他后⾯还有个#footer，⽤来测试在前⾯的
定位搞定后会不会导致后⾯的div错位——如果错位了，那证明我们的定位⽅法必须改进。
下⾯列举⼏个常见的⽅法：
1，固定宽度区浮动，⾃适应区不设宽度⽽设置 margin
我们拿右边定宽左边⾃适应来做⽰范,CSS代码如下：
1 2 3 4 5 6 7 8 9
10
11
12
13 #wrap  {
overflow :  hidden ;  *zoom :  1 ;
}
# content  , #sidebar  {
background-color :  #eee ;
}
#sidebar  {
float :  right ;  width :  300px ;
}
# content  {
margin-right :  310px ;
}
#footer  { background-color :  #f00 ; color : #fff ;  margin-top :  1em }
其中，sidebar让他浮动，并设置了⼀个宽度；⽽content没有设置宽度。
⼤家要注意html中必须使⽤div标签，不要妄图使⽤什么p标签来达到⽬的。因为div有个默认属性，即如果不设置宽度，那他会⾃动填满他的⽗标签的宽度。这⾥的content就是例⼦。
当然我们不能让他填满了，填满了他就不能和sidebar保持同⼀⾏了。我们给他设置⼀个margin。由于sidebar在右边，所以我们设置content 的margin-right值，值⽐sidebar的宽度⼤⼀点点——以便区分他们的范围。例⼦中是310.
假设content的默认宽度是100%，那么他设置了margin后，他的宽度就变成了100%-310，此时content发现⾃⼰的宽度可以与sidebar挤在同⼀⾏了，于是他就上来了。
⽽宽度100%是相对于他的⽗标签来的，如果我们改变了他⽗标签的宽度，那content的宽度也就会变——⽐如我们把浏览器窗⼝缩⼩，那wrap的宽度就会变⼩，⽽content的宽度也就变⼩——但，他的实际宽度100%-310始终是不会变的。
这个⽅法看起来很完美，只要我们记得清除浮动(这⾥我⽤了最简单的⽅法)，那footer 也不会错位。⽽且⽆论content 和sidebar 谁更长，都不
会对布局造成影响
.
但实际上这个⽅法有个很⽼⽕的限制——html 中sidebar 必须在content 之前！
但我需要sidebar 在content 之后！因为我的content ⾥⾯才是⽹页的主要内容，我不想主要内容反⽽排在次要内容后⾯。
但如果sidebar 在content 之后，那上⾯的⼀切都会化为泡影。
可能有的⼈不理解，说你⼲嘛⾮要sidebar 在后⾯呢？这个问题说来话长，反正问题就是——content 必须在sidebar 之前，但content 宽度要⾃适应，怎么办？
下⾯有两个办法，不过我们先把html 结构改成我们想要的样⼦：
1
2css固定定位
3
4 < id ="wrap">    < id ="content" style ="height:340px;">⾃适应区，在前⾯ </>    < id ="sidebar" style ="height:240px;">固定宽度区 </>
</>
2，固定宽度区使⽤绝对定位，⾃适应区照例设置margin
我们把sidebar 扔掉，只对content 设置margin ，那么我们会发现content 的宽度就已经变成⾃适应了——于是content 对sidebar 说，我的宽度，与你⽆关。
content 很容易就搞定了，此时来看看sidebar ，他迫不得已抛弃了float 。我们来看看sidebar 的特点：在右边，宽度300，他的定位对content 不影响——很明显，⼀个绝对主义分⼦诞⽣了。
于是我们的css 如下：
1
2
3
4
5
6
7
8
9 #wrap  {      *zoom :  1 ;  position  :  relative  ;    }    #sidebar  {      width  :  300px ;  position  :  absolute  ;  right  :  0 ;  top  :  0 ;    }  # content  {      margin-right  :  310px ;
}
这段css 中要注意给wrap 加上了相对定位，以免sidebar 太绝对了跑到整个⽹页的右上⾓⽽不是wrap 的右上⾓。
好像完成了？在没有看footer 的表现时，我很欣慰。我们来把sidebar 加长——增长100px ！不要⼀年，只要⼀条内裤！哦，，，只要⼀句代码。
但是，footer怎么还是在那⼉呢？怎么没有⾃动往下⾛呢？footer说——我不给绝对主义者让位！
其实这与footer⽆关，⽽是因为wrap对sidebar的⽆视造成的——你再长，我还是没感觉。
看来这种定位⽅式只能满⾜sidebar⾃⼰，但对他的兄弟们却毫⽆益处。
3，float与margin齐上阵
经过前⾯的教训，我们重新确⽴了这个⾃适应宽度布局必须要达成的条件：
1. sidebar宽度固定，content宽度⾃适应
2. content要在sidebar之前
3. 后⾯的元素要能正常定位，不能受影响
由于绝对定位会让其他元素⽆视他的存在，所以绝对定位的⽅式必须抛弃。
如果content和sidebar⼀样，都⽤float，那content的⾃适应宽度就没戏了；如果不给content加float，那sidebar⼜会跑到下⼀⾏去。
所以，最终我决定：float与margin都⽤。
我打算把content的宽度设为100%，然后设置float:left，最后把他向左移动310，以便于sidebar能挤上来。
但这么⼀来content⾥⾯的内容也会跟着左移310，导致被遮住了，所以我们要把他重新挤出来。为了好挤，我⽤了⼀个额外的div包裹住内容，所以html结构变成了这种样⼦：
1 2 3 4 5 6 7 8 < id="wrap">
< id="content">
< id="contentb">
content⾃适应区，在前⾯
</>
</>
< id="sidebar">sidebar固定宽度区 </> </>
css则变成这样：
1 2 3 4 5 6 7 8 9 #sidebar  {
width :  300px ;  float :  right ;
}
# content  {
margin-left :  -310px ;  float :  left ;  width :  100% ;    }
#contentb  {
margin-left :  310px ;
}
这样⼀改，真正的“content”就变成了contentb，他的宽度跟以前的content⼀样，是100%-310.
⼤家可能注意到了代码中的两个margin-left，⼀个-310px⼀个310px，最后结合起来相当于什么都没⼲，着实蛋疼。但他确实解决了content 与sidebar的顺序问题。
这个⽅法的缺点就是：太怪异，以及额外多了⼀层div。
4，标准浏览器的⽅法
当然，以不折腾⼈为标准的w3c标准早就为我们提供了制作这种⾃适应宽度的标准⽅法。那就简单了：把wrap设为display:table并指定宽度100%，然后把content+sidebar设为display:table-cell；然后只给sidebar指定⼀个宽度，那么content的宽度就变成⾃适应了。
代码很少，⽽且不会有额外标签。不过这是IE7都⽆效的⽅法。
———————割尾巴————————-
如果不考虑ie7及以下版本，则使⽤标准⽅法；如果不在意sidebar与content的顺序，则⽤第⼀种⽅法；否则⽤第3种⽅法。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。