使用height:calc(100vh - 100px)即可。
意思是不管在什么窗口尺寸下,设置元素的高度比视口的高度少100px。
//注:减号前后要有空格,否则很可能不生效!!
calc()函数是CSS3 提出的,目的是动态改变宽度/高度的变化,适配问题。
vh,是指css中相对长度单位,表示相对视口高度(Viewport Height),1vh = 1% * 视口高度。
比如给div盒子元素设置height: calc(100vh - 100px)
div {
height: calc(100vh - 100px)
}
那么无论在什么窗口大小下,div元素底部总是距离窗口下方间距100px的距离。