css网页布局 --- 左边固定，右边自适应

转载

mb5ff40afd04638 2016-11-26 14:56:00

div的布局统一如下：

<body>
  <div class="wrap">
    <div class="left"></div>
    <div class="right"></div>
  </div>
</body>

css的基本设置统一如下：

    * {
      margin: 0;
    }
    html,body {
      width: 100%;
      height: 100%;
    }

第一种方式：左边的div向左浮动，右边的div的width为100%，margin-left值设置为左边div的宽度。

    div.wrap {
      width: 100%;
      height: 100%;
      background: #fefefe;
    }
    div.left {
      float: left;
      width: 300px;
      height: 100%;
      background: #eafeea;
    }
    div.right {
      width: 100%;
      height: 100%;
      margin-left: 300px;
      background: pink;
    }

这里因为没有内容，所以height: 100%来撑开。左边div在float之后，脱离文档流，右边元素width: 100%，是父元素的宽度减去子元素的padding和margin的剩下的宽度，所以刚好可以做到右边div的自适应。

第二种方式：和第一种方式的思路一样，只是这次我们可以通过将父元素设置为 position: relative；将左边的元素设置为 position: absolute；并且left为0。右边div不变。

    div.wrap {
      width: 100%;
      height: 100%;
      background: #fefefe;
      position: relative;
    }
    div.left {
      width: 300px;
      position: absolute;
      left: 0;
      height: 100%;
      background: #eafeea;
    }
    div.right {
      width: 100%;
      height: 100%;
      margin-left: 300px;
      background: pink;
    }

第三种方式：使用BFC方式，即将右边的div设置overflow: hidden；这样就可以出发BFC了，而BFC的规则就是不会和浮动元素重叠，如下：

    div.wrap {
      width: 100%;
      height: 100%;
      background: #fefefe;
    }
    div.left {
      float: left;
      width: 300px;
      height: 100%;
      background: #eafeea;
    }
    div.right {
      height: 100%;
      overflow: hidden;
      background: pink;
    }

注意到：这里我们直接把右边的div添加了overflow:hidden；然后又把width: 100%去掉，否则会出现问题。

第四种方式：左边固定宽度 float，右边width设置为100%， float: right，然后margin-right: -300px即可，通过margin负边距，我们就可以达到同样的效果：

    div.wrap {
      width: 100%;
      height: 100%;
      background: #fefefe;
    }
    div.left {
      float: left;
      width: 300px;
      height: 100%;
      background: #eafeea;
    }
    div.right {
      width: 100%;
      float: right;
      margin-right: -300px;
      height: 100%;
      background: pink;
    }

记住： margin负边距影响的永远都是文档流，文档流会认为其减小了，但是实际上并没有减小。

第五种方式：使用flex布局。包裹层使用flex，内部就是弹性布局了，不用设置。

    div.wrap {
      display: flex;
      width: 100%;
      height: 100%;
      background: #fefefe;
    }
    div.left {
      width: 300px;
      height: 100%;
      background: #eafeea;
    }
    div.right {
      width: 100%;
      height: 100%;
      background: pink;
    }

即左边的div仅仅设置width:300px，右边的div设置为width：100%即可。

第六种方式：左右两边全部使用绝对定位，左边设定宽度300px，右边100%。

    div.wrap {
      position: relative;
      width: 100%;
      height: 100%;
      background: #fefefe;
    }
    div.left {
      position: absolute;
      left: 0;
      top: 0;
      width: 300px;
      height: 100%;
      background: #eafeea;
    }
    div.right {
      position: absolute;
      top: 0;
      left: 300px;
      width: 100%;
      height: 100%;
      background: pink;
    }

这种方法也是轻松实现。

第七种方式：使用table布局。包裹元素设置为 display: table；子元素设置为 display: table-cell; 然后再设置好左边元素的宽度，右边元素不需要设置宽度。并且是等高布局。

    div.wrap {
      display: table;
      width: 100%;
      height: 100%;
      background: #fefefe;
    }
    div.left {
      display: table-cell;
      width: 300px;
      height: 100%;
      background: #eafeea;
    }
    div.right {
      display: table-cell;
      height: 100%;
      background: pink;
    }