100vh DIV is height of window, not viewport

Hi all. I’m having a basic issue with DIV height:

<body><div></div></body>

I set the DIV to 100vh height. However, in Safari, the height calculation seems to be including the entire window, including the address bar, bookmarks bar, and tabs. So there’s vertical scroll instead. Why is this happening, and how do I fix it? Thanks.

Is this only in Safari? Is it OK in other browsers?
It could be caused by the box model, if there are margins or borders on the div.

It doesn’t happen on my Safari (mac) and works as expected.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
html,body{margin:0;padding:0;}
div {height:100vh;background:red}

</style>
</head>

<body>
<div>test</div>
</body>
</html>

We’d need to see the page where the problem occurs and which version of Safari you are using?

Ah. Turns out it is being caused by my default 115% page zoom in Safari. Thanks.

2 Likes

Actually, I’m getting similar scroll issues on iOS. You can see here. Thanks.

I’m not seeing a scroll on my old iphone but I do notice that you have an fb-root div at the bottom and an iframe.

Have you tried the page without those 2 elements present?

I would guess that as you have not positioned those elements off the top of the screen screen then they may take up space in the flow.

It’s hard to tell as I’m not seeing a scroll issue on my device (although its an old iphone).

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.