Create a div, same size as the browser window max height

[qrazyneo1]

I want to create a div that is the same height as the user’s browser window (when the browser is maximized).

I can’t use ‘vh’ because then the div will adapt if the browser is reduced in size.

Can I accomplish this with just css, alternatively js? (window.screen is also not possible as it gives a higher result than the browser window max height because of desktop icons, browser tabs and adress bar)

Take care

[PaulOB]

@qrazyneo1

I can’t use ‘vh’ because then the div will adapt if the browser is reduced in size.

vh means viewport height so a height measurement of 100vh will be exactly the height of any viewport.

It doesn’t matter whether the window is maximized or resized as 100vh will always refer to the viewport’s height.

Whether or not the div will cover the viewport will depend on where and how the div is located. If there are no other elements before the div and you have set the body margin/padding to zero then the div will indeed match the viewport exactly.

Of course that won’t be the end of the story if you have content in that div that doesn’t fit the height you gave so we’d need a little more context if you have plans for that div

[qrazyneo1]

Hi Paul.

Thanks for your reply.

I don’t know if you understood me correctly, but we can try again.

I want to create a div that is the same size as the red mark on the images. The div has to keep that size even when the browser is minimized. Just like in the images… Pretend the red mark is the div, the size of the red mark does not change even if the browser is minimized

[PaulOB]

Let’s take it a step at a time and see if we can get there

Here is a div the same size as the viewport.

What is it that you need it to do that isn’t isn’t doing at the moment.

I feel you may have other plans for it

[qrazyneo1]

In your example, the red marking is correct when the browser is maximized. That’s how I want it to be. But if you reduce the size of the browser afterwards, the marking is also reduced, because it follows the browser, which I don’t want

Let’s say 100vh is = 900px, I want the marking to still be 900px when the browser decreases in height to say 40vh

Unfortunately, I cannot randomly specify that the marking should be 900px in height as I do not know that 900px is equal to 100vh on the client’s computer

[PaulOB]

I can’t think of a single use case for this but I believe you are asking for basically the monitor size. I believe that is available via JS using this:

console.log(window.screen.availWidth);
console.log(window.screen.availHeight);

You could plug that into a css variable and that code would be like this.

The live view from codepen would be this link (but not sure if its only available to me)

Maximised div size

The problem I see is that I had to knock 13px of the height which I guess is some chrome or invisible scrollbar so will need to be tested in various browsers.

As I said I can’t think of a use case for this and I never use a maximised screen (never ever as that is far too big on my large screen imac). I usually have about 4 browsers open at the same time. Hopefully though you have a good reason for doing this and hope the above helps

[qrazyneo1]

Thanks bro