我想要有一个窗口高度的某个百分比的顶部边距

我想问一个具体问题的帮助。我已经搜索过类似的问题，但还没有找到任何实际的解决方案。我对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>

来源

2013-04-23 Kalman Farago

为边距甲porcentual值将被计算百达靠在宽度包含元素的。这就是为什么当修改视口/容器元素的宽度时，您的相对边距位置会被修改。您可以使用javascript计算该值并进行适当的分配。

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

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

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

来源

2013-04-23 18:27:47 Fico

只是一个友好的提醒：视口单位没有得到广泛支持。 [浏览器支持]（http://caniuse.com/viewport-units） – 2013-04-23 18:50:11

感谢您的帮助！ – 2013-04-24 15:08:31

我想要有一个窗口高度的某个百分比的顶部边距

回答

相关问题