将 html 元素与内部高度等同起来

Question

抱歉，我是使用 Javascript DOM 的新手，经过我的研究，我找不到任何东西。 然后我决定在这里发帖

例如：当我输入

console.log(window.innerHeight);

它输出 633。然后我创建一个 html 元素并将其高度设置为 633px，如下所示：

    width: 100%;
    height: 633px;

我希望这个 html 元素看起来像一个完整的页面，但我不能

height: 100%

因为它下面会出现一个不同的 html 元素。 当页面高度改变时，我设置的高度为633px的html元素被破坏

主要问题：有没有办法使 window.innerHeight 输出与 html 元素的高度相等？

Answer 1

我不知道为什么你在同一个页面上有两个 html 元素，但把它放在一边......第二个是如何进来的？ 它是通过 JavaScript 加载的吗？ 如果是这样，您可以确保第一个 html id 具有类似 "" 的 id，并在加载新的 html 后使用 javascript 执行以下操作：

var element = document.getElementById('whatever');
element.style.height = window.innerHeight + 'px';

Answer 2

如果你使用 vh; 它会自动发生你想要的

Answer 3

这可以使用 CSS 使用相对单位vw和vh更容易地解决。 这个单位是相对于视口的。 它可以像这样使用：

.fullscreen {
  width: 100vw;
  height: 100vh;
}

此示例将始终保持视口宽度和高度的 100%，因此也会响应缩放。