Left fixed width right adaptive layout method

In the development of business management system, you will encounter the left-width, right-wide adaptive problem, such as the following situation
Method One: Left floating, right width set 100%

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

Method Two: Parent container settings display:flex;right partial settings flex:1

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

Method Three: Set float + Use the Calc () function in CSS

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

Analysis
1. Floating. (Note: To not affect other elements, do not forget to clear the float on the parent)

Calc () = Calc (arithmetic) is used to dynamically calculate length values in CSS, it is important to note that the operators need to keep a space before and after the operator, for example: Width:calc (100%-10px);

Vw:viewport width. 1VW = viewport width of 1%, 100VW = viewport width,

And the same vh:viewport height. 1VW = viewport height of 1%, 100VH = viewport.

Browser support: Mainstream browser, ie10+

VW and VH change with the viewport, making them ideal for use in adaptive scenarios.

Reference original Address
[Https://www.cnblogs.com/wx1993/p/6727653.html]