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

Question

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

我是否想编写 javascript 来获取初始视口高度，然后创建将这些尺寸传递给 css 的那些？任何人都可以告诉我如何做到这一点？

* {
  margin: 0;
  padding: 0;
}

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


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

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

标签： htmlcssviewport

Answer 1

我不认为你需要一个javascript。高度：100vh；从你的代码中就可以了。