CSS-动态计算高度

简介: Viewport viewport:可视窗口,也就是浏览器。 vw Viewport宽度, 1vw 等于viewport宽度的1% vh Viewport高度, 1vh 等于viewport高的的1%

Viewport

   viewport:可视窗口,也就是浏览器。

   vw Viewport宽度, 1vw 等于viewport宽度的1%

   vh Viewport高度, 1vh 等于viewport高的的1%

CSS3使用Calc

calc()使用通用的数学运算规则,但是也提供更智能的功能:

   >使用“+”、“-”、“*” 和 “/”四则运算

   >可以使用百分比、px、em、rem等单位;

   >可以混合使用各种单位进行计算;

>表达式中有“+”和“-”时,其前后必须要有空格,如"widht: calc(12%+5em)"这种没有空格的写法是错误的;

   >表达式中有“*”和“/”时,其前后可以没有空格,但建议留有空格。


例如 :设置div元素的高度为当前窗口高度-100px


div{

      height: calc(100vh - 100px);    

   }

相关文章
|
3月前
|
前端开发 JavaScript
vue 动态改变css样式
vue 动态改变css样式
101 0
|
3月前
|
前端开发
|
8月前
|
前端开发
解决VScode在保存less文件时,自动生成对应的css文件以及安装Easy less之后,计算式子不显示结果的问题
解决VScode在保存less文件时,自动生成对应的css文件以及安装Easy less之后,计算式子不显示结果的问题
|
1月前
|
前端开发 容器
你不知道的css——1. 外在盒子、内在盒子,宽度和高度的计算,box-sizing属性
你不知道的css——1. 外在盒子、内在盒子,宽度和高度的计算,box-sizing属性
20 3
你不知道的css——1. 外在盒子、内在盒子,宽度和高度的计算,box-sizing属性
|
1月前
|
JavaScript 前端开发
vue 模拟随机变速的动态打字特效【支持多行文本】(含css实现闪烁光标,js动态改变setInterval定时器的时间间隔)
vue 模拟随机变速的动态打字特效【支持多行文本】(含css实现闪烁光标,js动态改变setInterval定时器的时间间隔)
32 1
|
1月前
|
前端开发 容器
css 动态文本对齐自适应 — 文本宽度小于容器宽度时居中对齐,文本宽度大于容器宽度时居左对齐
css 动态文本对齐自适应 — 文本宽度小于容器宽度时居中对齐,文本宽度大于容器宽度时居左对齐
20 2
|
2月前
|
前端开发 JavaScript
使用JavaScript动态更改元素的CSS属性
【6月更文挑战第29天】使用JavaScript动态更改元素的CSS属性
39 3
|
2月前
|
前端开发 UED
纯css写一个动态圣诞老人
使用CSS创建的圣诞老人动画,通过`@keyframes`实现身体摇摆。关键代码包括定义动画`rock`,以及设置帽子、脸部、眼睛和胡须的样式。完整代码可下载,此效果为网页增添节日气氛,提升用户体验。[点此获取代码](https://download.csdn.net/download/No_Name_Cao_Ni_Mei/89489001)
19 0
纯css写一个动态圣诞老人
|
2月前
|
前端开发
CSS动画(动态导航栏)
CSS动画(动态导航栏)
|
3月前
|
前端开发 JavaScript
HTML DOM如何通过JavaScript动态改变元素的CSS样式?
【5月更文挑战第23天】HTML DOM如何通过JavaScript动态改变元素的CSS样式?
52 1