CSS calc 设置宽度和高度(转载)

转载来源：https://www.cnblogs.com/modouer/p/8526804.html 

 calc(100%-123px) 无效，尝试多次都失败！

 原来CSS3版本和以前版本不一样！

CSS3中：

设置宽度：width:calc(100vw - 123px);

说明：1、vw是width of view(port)的缩写；

　　　2、100vw表示百分之百的视图宽度；

　　　3、123px是需要减去的宽度；

　　　4、减号的两边必须都有至少一个空格。

设置高度：height:calc(100vh-123px);

说明：1、vh是height of view(port)的缩写；

　　　2、100vh表示百分之百的视图高度；

　　　3、123px是需要减去的高度；

　　　4、同理减号的两边必须都有至少一个空格。

 

案例：动态设置echarts 曲线图的高度，操过高度就显示滚动条。

100%高度-页面其它部分高度（63px）=echarts图形可显示高度。

　　

?

1 2 3 4 5

<div style="height:calc(100vh - 63px);margin-top:15px;overflow: auto;" >                        <div  id="chartsHour"   ></div>                            </div>