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

Question

Sorry, I'm new to using the Javascript DOM and after my research I couldn't find anything. then i decided to post here

For example: When I type

console.log(window.innerHeight);

it outputs 633. then I create an html element and give its height a value of 633px look like:

    width: 100%;
    height: 633px;

I want this html element to look like a full page, but I cannot

height: 100%

because a different html element will come under it. When the page height changes, the html element whose height I set as 633px is broken

the main question: Is there a way to equalize the window.innerHeight output with the height of the html element?

Answer 1

I'm not sure why you have two html elements on the same page but setting that aside... How does the second one come in? Does it get loaded via JavaScript? If so, you could make sure the first html id has an id like "" and use javascript to do something like this after the new one gets loaded:

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

Answer 2

if you use vh; automatically its happened what you want

Answer 3

This can be more easily solved using CSS using the relative units vw and vh . This unit is relative to the viewport. It can be used like this:

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

This example will always remain 100% of both width and height of the viewport and will therefor also scale responsively.