將 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%，因此也會響應縮放。