Adjust page function, when changing device, just reloading works

Question

I have a function to determine the height of the page, so that the page always stays at the maximum size regardless of the device, without scrolling.

I first take the maximum height of let s = $ (document).height and then the height of all other elements, such as the header, main footer and footer. I subtract the value of all items by the variable s , which contains the height total. I assign the result to the main height value, so the page is the way I want it.

However, when I change the device to chrome inspection feature, or I leave it in landscape, the page is irregular. So be sure to reload, try using windows.resize by calling a function, but it doesn't adjust, just reloads. I don't know what to do.

I call the function like this:

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

Answer 1

Any reason you couldn't use css to accomplish this? height: 100vh will keep an element at the viewport height even when resized, and using flex or grid you could stretch and scale the main layout elements however you need them.

 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>