2

我想就特定问题寻求帮助。我搜索了类似的问题，但没有找到任何实际的解决方案。我对 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>

4

1 回答 1

3

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

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

在这个小提琴中工作的解决方案在这里我修改了 buttoncontainer 类；

.buttoncontainer {
....
....
margin-top: 42vh;
}
于 2013-04-23T18:27:47.787 回答