0

有没有办法使用完整文档宽度的百分比仅使用 CSS 来定位我的元素，而不仅仅是浏览器宽度？

我正在创建一个水平滚动网站，其中所有元素的高度和顶部的对齐方式都是使用百分比设置的——这是为了适应所有浏览器大小并确保所有元素都保持比例。

如果我尝试使用类似的方式更改页面上元素的左（或右）对齐方式；

#my_element {
    position: absolute;
    top: 5%;
    width: 34%
    left: 10%;
}

这将是浏览器窗口宽度的 10%，而不是 body 或 html 元素的实际宽度——这在标准垂直滚动网站中是有意义的，但对我没有帮助。

我目前的解决方法是使用 JavaScript 定位左侧；

$('#my_element').css('left', $(document).width() / 100 * 10) //Position to 10% of the page.

这可行，但是当 JavaScript 加载速度不够快或我想使用 CSS 动画为各种元素设置动画时会导致一些问题。

4

2 回答 2

2

当您width使用百分比设置元素时，它会根据该元素的父元素进行测量。所以在下面，body元素是浏览器的 100% 宽度和元素div.box的 50% 宽度body。

<html>
<head>
  <style>
    div.box { width: 50% }
  </style>
</head>
<body>
  <div class="box">
</body>
</html>

您实际上可以更改body和html元素的宽度。

因此，例如，如果您有四个“幻灯片”或“面板”，您希望成为浏览器的 100% 宽度，您可以给html元素 400% 的宽度，即body100% 的宽度（仍然是浏览器的 400%，因为它parent 是html元素），每张幻灯片的宽度为 25%。

这是一个例子。

我看到的唯一问题是，如果您说三张幻灯片，您的html元素将是 300%，每张幻灯片 33.33333...%。所以你不会有一个很好的干净的号码文件。

有趣的事实是，您也可以使用任何元素，例如<head>或<script>。即，您可以<script>像任何其他元素一样显示 a 的内容，方法是将其默认值更改display: none为inlineor block... fiddle

于 2012-11-09T12:13:42.497 回答
0

这确实是可能的，要跨浏览器兼容，您还需要在 html 和 body 标签中设置宽度和高度。

样本

html {
    width:100.01%;
    height:100.01%;
}
body {
    width:auto;
    height:auto;
}
div#normaldiv {
    border: 1px blue solid;
}
div#absolutediv {
    border: 1px red solid;
    position: absolute;
    top: 5%;
    left: 10%;
    width: 34%;
    height: 20%;
}
​

该示例显示了这一点，其中 iframe 定义了窗口。使用 .01 到正常 100% 可以处理大多数像素问题。通过设置 html 和 body 的值，您还可以处理 IE6 中存在的布局问题。

于 2012-11-09T23:58:14.500 回答