調整頁面 function，更換設備時，只需重新加載即可

Question

我有一個 function 來確定頁面的高度，這樣無論設備如何，頁面都始終保持在最大尺寸，無需滾動。

我首先取let s = $ (document).height的最大高度，然后取所有其他元素的高度，例如 header、主頁腳和頁腳。 我用變量s減去所有項目的值，其中包含總高度。 我將結果分配給主高度值，所以頁面就是我想要的方式。

但是，當我將設備更改為 chrome 檢查功能，或者將其置於橫向時，頁面不規則。 所以一定要重新加載，嘗試使用windows.resize通過調用 function，但它不會調整，只是重新加載。 我不知道該怎么辦。

我這樣稱呼 function：

$("document").ready(function() {
    changesize();
    $(window).resize(function() {
        changesize();
    });
};

Answer 1

你有什么理由不能使用 css 來完成這個？ height: 100vh即使在調整大小時也會將元素保持在視口高度，並且使用flex或grid您可以根據需要拉伸和縮放主要布局元素。

 body { margin: 0; text-align: center; }.container { height: 100vh; display: flex; flex-direction: column; } header, footer { background: aliceblue; flex: 0 0 auto; }.content { flex: 1 1 auto; background: lightblue; }

 <section class="container"> <header><h1>header</h1></header> <div class="content">content</div> <footer>Footer</footer> </section>