右边固定，左边自适应

Posted 2020-10-05 冯叶青

右边固定，左边自适应

原理：两节点并排，左节点浮动，右节点向最左边靠齐，此时浮动元素会遮住左节点，因为块状元素默认长度100%；

 

html

<div id="wrap">
  <div id="sidebar" style="height:340px;">固定宽度区</div>
  <div id="content" style="height:340px;">自适应区</div>
</div>
<div id="footer">后面的一个DIV，以确保前面的定位不会导致后面的变形</div>

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}