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

【问题标题】：equate html element with inner height将html元素与内部高度等同起来
【发布时间】：2021-09-15 18:41:49
【问题描述】：

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

例如：当我输入时

console.log(window.innerHeight);

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

    width: 100%;
    height: 633px;

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

height: 100%

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

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

【问题讨论】：

【解决方案1】：

这可以通过使用相对单位 vw 和 vh 的 CSS 更轻松地解决。这个单位是相对于视口的。可以这样使用：

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：