Question

我想就具体问题寻求帮助。我搜索过类似的问题，但没有找到任何实际的解决方案。我对css很新。

我正在尝试使用一个名为“buttoncontainer”的蓝色框，稍后会在其中显示按钮。现在，我想格式化它，以便浏览器窗口的上边缘和蓝色框的上边缘之间的距离始终是窗口总高度的42％。如下面的代码所示，我试图通过给出42％的上限来实现这一目标。

然而，我不能这样做。当我在Firefox或IE中打开html文件（这是我家用桌面上的那个）时，当窗口全屏时，距离显然是不同的。如果不是，我开始调整大小，框的位置根本不响应垂直大小调整。但是，它确实响应了横向调整大小，我不希望它这样做。

以下两个截图有助于描述我想要的内容： First Second

我想这必须是我正在制作的新手错误，但我无法弄清楚如何做到正确。我真的很感激帮助。重申一下，我希望窗口顶边和蓝框之间的距离始终为窗口总高度的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>

Answer 1

margin-top的porcentual值将根据包含元素的宽度计算。这就是修改视口/容器元素宽度时修改相对边距位置的原因。您可以使用javascript计算值并进行适当分配。

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

此解决方案在此fiddle处工作，我修改了buttoncontainer类;

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

我希望有一个上限，这是窗口高度的一定百分比

1 个答案: