我想就一个具体问题寻求帮助。我搜索过类似的问题，但没有找到任何实际的解决方案。我对 CSS 还很陌生。
我正在尝试创建一个名为 的蓝色框buttoncontainer，稍后将在其中包含按钮。现在，我想对其进行格式化，以便浏览器窗口的上边缘和蓝色框的上边缘之间的距离始终为窗口总高度的 42%。如下面的代码所示，我试图通过为框提供 42% 的上边距来实现此目的。
然而，我做不到。当我在 Firefox 或 IE（这是我家庭桌面上的浏览器）中打开 HTML 文件时，当窗口全屏时，距离显然有所不同。如果不是，并且我开始调整它的大小，则该框的位置根本不会响应垂直调整大小。然而，它确实响应水平调整大小，我不希望它这样做。
我想这一定是我犯的一个菜鸟错误，但我就是不知道如何纠正。
重申一下，我希望窗口顶部边缘和蓝色框之间的距离始终为窗口总高度的 42%。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="jquery-1.9.0.js"></script>
<style type="text/css">
body {
background-color: #C94735
}
iframe {
background-color: #FFF;
border: 0;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 63%;
height: 100%;
margin-left: 25%;
margin-right: 12%;
}
.buttoncontainer {
background-color: #00F;
border: 0;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin-top: 42%;
/* margin-bottom: auto; */
margin-left: 15px;
width: 25%;
height: 58%;
}
</style>
</head>
<body>
<div id="container" class="buttoncontainer">
</div>
<iframe id="content"></iframe>
</body>
</html>margin-top 的实际值将始终根据包含元素的宽度来计算。这就是为什么当视口/容器元素的宽度被修改时，相对边距位置也会被修改。您可以使用 javascript 计算该值并适当分配。
您也可以尝试使用视口相对单位（仅限 css level 3）。（1vw = 视口宽度的 1%，1vh = 视口高度的 1%）
在这个小提琴中工作的解决方案，我修改了buttoncontainer类；
.buttoncontainer {
....
....
margin-top: 42vh;
}