CSS单侧固定，另一侧宽度自适应

来源：恒创科技编辑：恒创科技编辑部

2024-01-19 00:48:59

左侧宽度固定，右侧自适应，无论是左是右，反正就是一边宽度固定，一边宽度自适应。

HTML代码如下

<div id="wrap"><div id="sidebar" style="height:240px;">固定宽度区</div><div id="content" style="height:340px;">自适应区</div></div><div id="footer">后面的一个DIV，以确保前面的定位不会导致后面的变形</div>方法一：固定宽度区浮动，自适应区不设宽度而设置 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让他浮动，并设置了一个宽度；而content没有设置宽度。此方法应注意：html中sidebar必须在content之前！

方法二：固定宽度区使用绝对定位，自适应区照例设置margin

我们把sidebar扔掉，只对content设置margin，那么我们会发现content的宽度就已经变成自适应了——于是content对sidebar说，我的宽度，与你无关。

#wrap {*zoom: 1; position: relative;}#sidebar {width: 300px; position: absolute; right: 0; top: 0;}content {margin-right: 310px;}

注意：此方法会导致后面的div盒子错位；

方法三：w3c标准自适应法

w3c标准早就为我们提供了制作这种自适应宽度的标准方法。那就简单了：把wrap设为display:table并指定宽度100%,然后把content+sidebar设为display:table-cell;然后只给sidebar指定一个宽度，那么content的宽度就变成自适应了。

总结：如果不考虑ie7及以下版本，则使用标准方法；如果不在意sidebar与content的顺序，则用第一种方法；

本文地址：https://www.henghost.com/jishu/17902/