css height属性为screenSize - 300px;

Question

我想创建一个高度等于屏幕高度减去300px的div。

如何在不使用JavaScript的情况下在CSS中执行此操作？

屏幕高度＆＃34;我的意思是视口的高度，而不是显示器本身。

Answer 1

使用calc使元素100％成为其容器的高度减去300px：

div {
  height: calc(100% - 300px)
}

如果 对视口的高度感兴趣而不是包含元素，则可以使用vh：

div {
   height: calc(100vh - 300px)
}