左边定宽右边自适应布局方法

在开发业务管理系统时，会遇到左边定宽，右边宽度自适应的问题，比如以下的情况
方法一：左边设置左浮动，右边宽度设置100%

            .left{
                float: left;
            }
            .right{
                width: 100%;
            }

---

方法二： 父容器设置 display：flex；Right部分设置 flex：1

        .body{
                display: flex;
            }
            .right{
                flex: 1;
            }

---

方法三：设置浮动 + 在 css 中使用 calc() 函数

            .left{
                float: left;
            }
            .right{
                float: left;
                width: calc(100vw-200px);
            }

【分析】
1. 浮动。（注意：为了不影响其他元素，别忘了在父级上清除浮动）

1. calc() = calc(四则运算) 用于在 css 中动态计算长度值，需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；

2. vw： viewport width。1vw = viewport 宽度的 1%, 100vw = viewport width,

同样的还有 vh： viewport height。1vw = viewport 高度的 1%， 100vh = viewport height。

浏览器支持情况： 主流浏览器、IE10+

vw 和 vh 会随着viewport 的变化而变化，因此十分适合于自适应场景来使用。

---

参考原文地址
[https://www.cnblogs.com/wx1993/p/6727653.html]