geiger
February 18, 2017, 2:22pm
1
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.
SamA74
February 18, 2017, 2:40pm
2
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.
PaulOB
February 18, 2017, 3:01pm
3
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?
geiger
February 18, 2017, 3:03pm
4
Ah. Turns out it is being caused by my default 115% page zoom in Safari. Thanks.
2 Likes
geiger
February 18, 2017, 3:52pm
5
Actually, I’m getting similar scroll issues on iOS. You can see here . Thanks.
PaulOB
February 18, 2017, 5:04pm
6
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).
system
Closed
May 21, 2017, 12:05am
7
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.