css网页布局 --- 左边固定，右边自适应
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; }
效果如下：
