css实现左侧固定宽度，右侧宽度自适应(转载)

转载来源：https://blog.****.net/cristina_song/article/details/78374705

1，固定宽度区浮动，自适应区不设宽度而设置 margin

<!DOCTYPE html>  
<html>  
    <head>
        <style type="text/css">
        #wrap {
            overflow: hidden; *zoom: 1;
          }
          #content ,#sidebar {
            background-color: #eee; 
          }
          #sidebar {
            float: left;  300px;
          }
          #content {
            /*float: right;此处不能写浮动，否则会脱离文档流*/
            margin-left: 310px;
          }
          #footer {background-color: #f00;color:#fff; margin-top: 1em}
        </style>
    </head>
    <body>
        <div >
          <div >固定宽度区</div>
          <div >自适应区</div>
        </div>
        <div >后面的一个DIV，以确保前面的定位不会导致后面的变形</div>
    </body>
 </html>

无论content和sidebar谁更长，都不会对布局造成影响.
css实现左侧固定宽度，右侧宽度自适应(转载)

2，固定宽度区使用绝对定位，自适应区照例设置margin

<!DOCTYPE html>  
<html>  
    <head>
        <style type="text/css">

                  #wrap {
            *zoom: 1; position: relative;
          }
            #content ,#sidebar {
                    background-color: #eee; 
                  }
          #sidebar {position: absolute; left:0; top: 0; 300px;
          }
          #content {
           margin-left: 310px;
          }
        #footer {background-color: #f00;color:#fff; margin-top: 1em}
        </style>
    </head>
    <body>
        <div >
          <div >固定宽度区</div>
          <div >自适应区</div>
        </div>
        <div >后面的一个DIV，以确保前面的定位不会导致后面的变形</div>
    </body>
 </html>

　　 css实现左侧固定宽度，右侧宽度自适应(转载)
footer说——我不给绝对主义者让位！所以要注意footer的设置。
3.标准浏览器的方法
w3c标准早就为我们提供了制作这种自适应宽度的标准方法。那就简单了：把wrap设为display:table并指定宽度100%,然后把content+sidebar设为display:table-cell;然后只给sidebar指定一个宽度，那么content的宽度就变成自适应了。

<!DOCTYPE html>  
<html>  
    <head>
        <style type="text/css">

                  #wrap {
            display:table;
             100%;
          }
            #content,#sidebar {
                    background-color: #eee; 
                    display: table-cell;
                  }
          #sidebar {
             300px; 
          }
          #content {
          margin-left: 10px;
          display: block;
          }
 #footer {background-color: #f00;color:#fff; margin-top: 1em}
        </style>
    </head>
    <body>
        <div >
          <div >固定宽度区</div>
          <div >自适应区</div>
        </div>
        <div >后面的一个DIV，以确保前面的定位不会导致后面的变形</div>
    </body>
 </html>

css实现左侧固定宽度，右侧宽度自适应(转载)
如果不考虑ie7及以下版本，则使用标准方法；如果不在意sidebar与content的顺序，则用第一种方法；

css实现左侧固定宽度，右侧宽度自适应(转载)

相关推荐