我不能让这个DIV达到100％的高度

Question

这是网站：

https://goomaps.co

我希望全景背景为100％高度，无论我想要什么，我似乎无法找到它为什么不起作用。任何人都可以用新鲜的目光看看来源，让我知道我错过了什么。

以下是代码：

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

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

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

100vh在桌面上工作正常但在移动设备上中断。我宁愿使用身高：100％ 当我更改高度值时，我得到的只是一个白色屏幕，调试工具显示高度为0px

注意：目前它仅为测试设置为97vh。但是底部还有一个白色条。在移动设备上更糟糕。如果你将它设置为100vh，它会在移动设备上中断，导航按钮会消失。

Answer 1

#pano有此

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

如果您将height: 97vh更改为height: 100vh，那么它将是全高

Answer 2

检查浏览器开发工具中的#pano元素给了我这个。

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

看起来该元素上有一些内联样式赋予它们这些属性。更改高度100vh。另外，在移动浏览器上使用vh是因为当移动浏览器最初从页面顶部开始时，浏览器URL栏会出现，当你开始滚动时，url栏会消失，100VH的元素会立即尝试填满整个屏幕。这导致了一个非常糟糕的动画＆＃34;如果你愿意的话。

Answer 3

好的，所以我想出了这个：

我忘了考虑标题（因为它是透明的）所以我需要修改CSS的高度：

height:calc(100vh - 30px)

问题解决了。