I can't get this DIV to 100% height

This is the website:


I want the panoramic background to be 100% height, no matter what I am trying I can’t seem to find why it’s not working. Can anyone take a look at the source with fresh eyes and let me know what I’m missing.

Here’s the code:

<script src="/vtour/tour.js"></script>

<div id="pano" style="width:100%; height:100vh; overflow:hidden;"></div>

 embedpano({swf:"vtour/tour.swf", xml:"vtour/tour.xml", target:"pano"});

100vh works fine on desktop but breaks on mobile. I would rather use height:100%
When I change the height value, all I get is a white screen and the debug tool shows the height is 0px

Note: It’s currently set to 97vh just for testing. But there’s still a white bar at the bottom. And even worse on mobile. If you set it to 100vh it breaks on mobile and the navigation buttons disappear.

#pano has this

width: 100%;
min-height: 97vh;
height: 97vh;

if you change height: 97vh to height: 100vh it will be full height

Inspecting the #pano element in the browser dev tools gives me this.

width: 100%;
min-height: 100vh;
height: 97vh;

It looks like there is some inline styling on that element giving it those properties. Change the height too 100vh. Also, using vh on mobile kind of blows because when mobile browsers initially start at the top of the page, the browser url bar is present, and when you start to scroll, the url bar will dissappear and the element with 100VH will immediately try to fill the whole screen. This results in a really poor looking “animation” if you will.

Ok so I have figured this one out:

I forgot to account for the header (as it was transparent) so I needed to modify the height CSS:

height:calc(100vh - 30px)

problem solved.