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图形可显示高度。