Css 如何拥有一个'；窗户高度的百分之几是多少？

我想就一个具体问题寻求帮助。我搜索过类似的问题，但没有找到任何实际的解决方案。我对CSS还比较陌生

我正在尝试创建一个名为

buttoncontainer

的蓝色框，稍后将在其中包含按钮。现在，我想格式化它，使浏览器窗口的上边缘和蓝色框的上边缘之间的距离始终为窗口总高度的42%。正如下面的代码所示，我试图通过给方框42%的最高利润率来实现这一点

然而，我做不到。当我在Firefox或IE中打开HTML文件时（这是我在家庭桌面上看到的），当窗口是全屏时，距离显然有所不同。如果不是，并且我开始调整它的大小，则长方体的位置根本不响应垂直大小调整。但是，它会响应水平调整大小，我不希望它这样做

我想这一定是我犯的一个新手错误，但我就是不知道该怎么做

重申一下，我希望窗口顶部边缘和蓝色框之间的距离始终为窗口总高度的42%

无标题文件
身体{
背景色：#C94735
}
iframe{
背景色：#FFF；
边界：0；
位置：固定；
排名：0；
左：0；
右：0；
底部：0；
宽度：63%；
身高：100%；
左边缘：25%；
保证金权利：12%；
}
.按钮容器{
背景色：#00F；
边界：0；
位置：固定；
排名：0；
左：0；
右：0；
底部：0；
利润率最高：42%；
/*页边距底部：自动*/
左边距：15px；
宽度：25%；
身高：58%；
}

将始终根据包含元素的宽度计算边距顶部的预期值。这就是在修改视口/容器元素的宽度时修改相对边距位置的原因。 您可以使用javascript计算值并适当地分配

您也可以尝试使用视口相对单位（仅css级别3）。（1vw=视口宽度的1%，1vh=视口高度的1%）

在这里工作的解决方案，我修改了buttoncontainer类

.buttoncontainer {
....
....
margin-top: 42vh;
}

---

只是一个友好的提醒：视口单位并没有得到广泛的支持。