css完成右边固定不动宽度 左边宽度自融入

反过来还可以：左边宽度固定不动，右边自融入。无论是左是右，总之便是1边宽度固定不动，1边宽度自融入。

这类合理布局较为普遍，blog园许多默认设置主题便是这类。1般状况下，这类合理布局中宽度固定不动的地区是侧面栏，而自融入的地区是行为主体內容区——坚信把侧面栏搞成自融入的人非常少吧？

要完成这类合理布局，也算较为简易。大家先得出html构造：

<div id="wrap">
  <div id="sidebar" style="height:240px;">固定不动宽度区</div>
  <div id="content" style="height:340px;">自融入区</div>
</div>
<div id="footer">后边的1个DIV，以保证前面的精准定位不容易致使后边的形变</div>

编码中的#wrap的div，是用来包裹大家要精准定位的这两个区的；他后边也有个#footer，用来检测在前面的精准定位搞定后会不容易致使后边的div移位——假如移位了，那证实大家的精准定位方式务必改善。

下面例举几个普遍的方式：

1，固定不动宽度区波动，自融入区不设宽度而设定 margin

大家拿右侧定宽左侧自融入来做示范性,CSS编码以下：

#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让他波动，并设定了1个宽度；而content沒有设定宽度。

大伙儿要留意html中务必应用div标识，不必企图应用甚么p标识来做到目地。由于div有个默认设置特性，即假如不设定宽度，那他会全自动铺满他的父标识的宽度。这里的content便是事例。

自然大家不可以让他铺满了，铺满了他就不可以和sidebar维持同1行了。大家给他设定1个margin。因为sidebar在右侧，因此大家设定content的margin-right值，值比sidebar的宽度大1点点——便于区别她们的范畴。事例中是310.

假定content的默认设置宽度是100%，那末他设定了margin后，他的宽度就变为了100%⑶10，此时content发现自身的宽度能够与sidebar挤在同1行了，因而他就上来了。

而宽度100%是相对他的父标识来的，假如大家更改了他父标识的宽度，那content的宽度也就会变——例如大家把访问器对话框变小，那wrap的宽度就会缩小，而content的宽度也就缩小——但，他的具体宽度100%⑶10自始至终是不容易变的。

这个方式看起来很完善，要是大家记得消除波动(这里我用了最简易的方式)，那footer也不容易移位。并且不管content和sidebar谁更长，都不容易对合理布局导致危害.

但具体上这个方式有个很老火的限定——html中sidebar务必在content以前！

但我必须sidebar在content以后！由于我的content里边才是网页页面的关键內容，我不想关键內容反而排在主次內容后边。

但假如sidebar在content以后，那上面的1切都会化为乌有。

将会有的人没理解，说你干吗非要sidebar在后边呢？这个难题说来话长，总之难题便是——content务必在sidebar以前，但content宽度要自融入，如何办？

下面有两个方法，但是大家先把html构造改为大家要想的模样：

<div id="wrap">
  <div id="content" style="height:340px;">自融入区，在前面</div>
  <div id="sidebar" style="height:240px;">固定不动宽度区</div>
</div>

2，固定不动宽度区应用肯定精准定位，自融入区照样子写一写设定margin

大家把sidebar丢掉，只对content设定margin，那末大家会发现content的宽度就早已变为自融入了——因而content对sidebar说，我的宽度，与你不相干。

content很非常容易就搞定了，此时看来看sidebar，他不得已抛下了float。大家看来看sidebar的特性：在右侧，宽度300，他的精准定位对content不危害——很显著，1个肯定现实主义分子结构诞生了。

因而大家的css以下：

#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！不必1年，要是1条内裤！哦，，，要是1句编码。

可是，footer如何還是在那儿呢？如何沒有全自动往下走呢？footer说——我不给肯定现实主义者让位！

实际上这与footer不相干，而是由于wrap对sidebar的疏忽导致的——你再长，我還是没觉得。

来看这类精准定位方法只能考虑sidebar自身，但对他的弟兄们却没什么好处。

3，float与margin齐上阵

历经前面的经验教训，大家再次确立了这个自融入宽度合理布局务必要达到的标准：

• sidebar宽度固定不动，content宽度自融入
• content要在sidebar以前
• 后边的元素要能一切正常精准定位，不可以受危害

因为肯定精准定位会让别的元素疏忽他的存在，因此肯定精准定位的方法务必抛下。

假如content和sidebar1样，都用float，那content的自融入宽度就没戏了;假如不给content加float，那sidebar又会跑到下1行去。

因此，最后我决策：float与margin都用。

我准备把content的宽度设为100%,随后设定float:left，最终把他向左挪动310，便于于sidebar能挤上来。

但这么1来content里边的內容也会跟随左移310，致使被遮挡住了，因此大家要把他再次挤出来。以便好挤，我用了1个附加的div包裹住內容，因此html构造变为了这类模样：

<div id="wrap">
  <div id="content" style="height:140px;">
    <div id="contentb">
      content自融入区，在前面
    </div>
  </div>
  <div id="sidebar" style="height:240px;">sidebar固定不动宽度区</div>
</div>

css则变为这样：

#sidebar {
    width: 300px; float: right;
  }
  #content {
    margin-left: ⑶10px; float: left; width: 100%;
  }
  #contentb {
    margin-left: 310px;
  }

这样1改，真实的“content”就变为了contentb，他的宽度跟之前的content1样，是100%⑶10.

大伙儿将会留意到了编码中的两个margin-left，1个⑶10px1个310px，最终融合起来非常于甚么都没干，着实蛋疼。但他的确处理了content与sidebar的次序难题。

这个方式的缺陷便是：太奇异，和附加多了1层div。

4，规范访问器的方式

自然，以不折腾人为因素规范的w3c规范早就为大家出示了制做这类自融入宽度的规范方式。那就简易了：把wrap设为display:table并特定宽度100%,随后把content+sidebar设为display:table-cell;随后只给sidebar特定1个宽度，那末content的宽度就变为自融入了。

编码非常少，并且不容易有附加标识。但是这是IE7都失效的方式。

———————割尾巴————————-

假如不考虑到ie7及下列版本号，则应用规范方式；假如不在乎sidebar与content的次序，则用第1种方式；不然用第3种方式。

以上编码都没在IE6检测，有难题不负责解释。本人感觉，让IE6与世长辞的方法便是——从此已不理他。