网页布局-左侧固定，右侧自适应
Posted Victor，再进一步！
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了网页布局-左侧固定，右侧自适应相关的知识，希望对你有一定的参考价值。
在网页布局中，以前只考虑了两列、三列的布局方式，但是没有过多的去考虑在两列、三列布局的情况下实现某些自适应的情况；今天遇到这个问题，在这里mark一下；
方法一：左侧元素浮动或者绝对定位的方式脱离文档流，让两个块级元素能够在同一行显示。然后margin-left的值设置为左侧元素的宽度；在这里利用了div的一个默认规则，div没有设置宽度的情况下会继承父元素的宽度；如果用p等其他标签达不到此效果；
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> </head> <style type="text/css"> .box1{float: left;width: 300px;height: 150px;background: red;} .box2{margin-left: 300px;background: blue;height: 150px;} </style> <body> <div class="box1"></div> <div class="box2"></div> </body> </html>
效果图：
方法二：利用BFC（块级格式化上下文）来防止蚊子环绕的原理来实现；BFC就是一个相对独立的布局环境，它内部元素的布局不受外面布局的影响，它可以通过多种方式来创建：
1.float不为none；
2.position不为static或者relative；
3.display为table-cell，table-caption，inline-block，flex或者inline-flex中的其中一个都可；
4.overflow不为visible；
关于BFC，W3C等资料是这样描述的：在BFC中，每个盒子的左外边框紧挨着包含块的左边框（从右到左的格式化时，则为右边框紧挨）。即使在浮动里也是这样的（尽管一个包含块的边框会因为浮动而萎缩），除非这个包含块的内部创建了一个新的BFC。这样，当我们给右侧的元素单独创建一个BFC时，它将不会紧贴在包含块的左边框，而是紧贴在左边框的右边框；
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> </head> <style type="text/css"> .box1{float: left;width: 300px;height: 150px;background: red;} .box2{background: yellow;height: 150px;overflow: auto;} </style> <body> <div class="box1"></div> <div class="box2"></div> </body> </html>
效果：
注：在测试过程中遇到一个问题，去掉box2的overflow：auto；属性，右侧的div也能达到自适应的效果。自适应的盒子是否需要在设置BFC还有待更一步确认；
方法三：利用display:table;的方式实现；父元素设置display:table;宽度100%，左右盒子设置display:table-cell;，左侧固定的盒子设置宽高，右侧自适应的盒子设置高度即可；
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> </head> <style type="text/css"> .box{display: table;width: 100%;} .box1{width: 300px;height: 150px;background: red;display: table-cell;} .box2{background: green;height: 150px;display: table-cell;} </style> <body> <div class="box"> <div class="box1"></div> <div class="box2"></div> </div> </body> </html>
效果：
以上是关于网页布局-左侧固定，右侧自适应的主要内容，如果未能解决你的问题，请参考以下文章