集团网站建设特点 互联网课堂,湖州做网站优化,慈利县建设局网站,南京网站建设工作室calc方法
calc()方法是css用来计算的,比如一个场景,上下固定高度,中间自适应,就可以使用这个方法。
预编译less也是可以使用这个方法的
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewp…calc方法
calc()方法是css用来计算的,比如一个场景,上下固定高度,中间自适应,就可以使用这个方法。
预编译less也是可以使用这个方法的
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
stylebody{margin: 0 !important;}header{height: 100px;background: red;}.box{height:calc(100vh - 200px);background: pink;}footer{height: 100px;background: green;}
/style
bodyheader/headerdiv classbox/divfooter/footer
/body
/html
效果如下: 坑点:
在vue文件中,如果style标签中设置了less,那么直接写calc就不会生效,必须用下面的语法才行
style langless.box{height:calc(~100vh - 200px)}
/style
