css布局--左固定右自适应两栏布局

默认结构:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>左侧固定 右侧自适应--两栏布局</title>
  <style>
    .outer {
      height: 60px;
    }

    .sidebar,
    .content {
      height: 100%;
    }

    .sidebar {
      width: 200px;
      background: red;
    }

    .content {
      background: green;
    }
  </style>
</head>

<body>
  <div class="outer">
    <div class="sidebar">固定宽度区(sideBar)</div>
    <div class="content">自适应区(content)</div>
  </div>
</body>

</html>

默认布局

可以利用以下方法达到左侧固定右侧自适应的效果:

两栏布局

利用BFC与浮动元素不重叠

    .sidebar{
      float: left;
    }
    .content{
      overflow: hidden;//触发BFC
    }

利用浮动和margin-left

    .sidebar{
      float: left;
    }
    .content{
      margin-left: 200px;
    }

利用绝对定位和margin-left

    .outer{
      position: relative;
      top: 0;
      left: 0;
    }
    .sidebar{
      position: absolute;
      top: 0;
      left: 0;
    }
    .content{
      margin-left: 200px;
    }

float和calc配合

    .sidebar{
      float: left;
    }
    .content{
      float: left;
      width: calc(100% - 200px);
    }

inline-block和calc配合
要记得父级font-size:0; 去除内联元素中间的空白。

    .outer{
      font-size: 0;
    }
    .sidebar{
      display: inline-block;
      font-size: 16px;
    }
    .content{
      display: inline-block;
      width: calc(100% - 200px);
      font-size: 16px;
    }

flex

    .outer{
      display: flex;
    }
    .content{
      flex: 1; //自动填充剩余空间
    }

css布局--左固定右自适应两栏布局

推荐阅读更多精彩内容