我想就特定问题寻求帮助。我搜索过类似的问题，但没有找到任何实际的解决方案。我对 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 的实际值将始终根据包含元素的宽度来计算。这就是为什么当视口(viewport)/容器元素的宽度被修改时，相对边距位置也会被修改。 您可以使用 javascript 计算该值并进行适当分配。
您也可以尝试使用视口(viewport)相对单位(仅限 css level 3)。 (1vw = 视口(viewport)宽度的 1%，1vh = 视口(viewport)高度的 1%)
解决方案在此工作 fiddle我在其中修改了buttoncontainer类；
.buttoncontainer {
....
....
margin-top: 42vh;
}
关于css - 如何使上边距为窗口高度的一定百分比？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16176305/