html - 如何设置元素的尺寸以仅填充初始窗口/视口(viewport)大小？

Question

我试图让一个元素只保持视口(viewport)初始 100% 的高度。因此，无论何时用户调整窗口大小时，高度都不应该响应。

我是否应该编写 javascript 来获取初始视口(viewport)高度，然后创建那些将这些尺寸传递给 css 的东西？谁能告诉我怎么做？

* {
  margin: 0;
  padding: 0;
}

.top {
  height: 100vh;
  width: 100%;
  background-color: yellow;
}


.bottom {
  height: 300px;
  width: 100%;
  background-color: red;
}

top 类是我要保持其初始 100% 视口(viewport)大小的 div。

Answer 1

我认为您不需要为此使用 javascript。高度:100vh；从你的代码中就可以了。