有没有办法仅使用CSS使用整个文档宽度的百分比(而不仅仅是浏览器宽度)来左定位我的元素？
我正在创建一个水平滚动网站，其中所有元素高度和顶部对齐方式都使用百分比设置——这是为了适应所有浏览器大小并确保保持所有元素的比例。
如果我尝试使用类似的东西更改页面上元素的左(或右)对齐方式;
#my_element {
position: absolute;
top: 5%;
width: 34%
left: 10%;
}
这将是浏览器窗口宽度的 10%，而不是正文或 html 元素的实际宽度——这在标准的垂直滚动网站中是有意义的，但对我没有帮助。
我目前的解决方法是使用 JavaScript 向左定位，做类似的事情;
$('#my_element').css('left', $(document).width() / 100 * 10) //Position to 10% of the page.
这有效，但是当 JavaScript 加载速度不够快或我想使用 CSS 动画对各种元素进行动画处理时，这导致了一些问题。
当您使用百分比设置元素的width时，将根据该元素的父级进行度量。所以下面，body元素是浏览器的 100% 宽度，div.box是body元素的 50% 宽度。
<html>
<head>
<style>
div.box { width: 50% }
</style>
</head>
<body>
<div class="box">
</body>
</html>
您实际上可以更改body和html元素的宽度。
因此，例如，如果您有四个"幻灯片"或"面板"，您希望浏览器的宽度为 100%，则可以为html元素提供 400% 的宽度，body100% 的宽度(仍然是浏览器的 400%，因为它的父元素是html元素)，每张幻灯片的宽度为 25%。
这是一个带有示例的小提琴。
我看到的唯一问题是，如果你说三张幻灯片，你的html元素将是 300%，每张幻灯片是 33.33333...%。所以你不会有一个漂亮的干净的数字文件。
有趣的是，你也可以弄乱任何元素，比如<head>或<script>。 即，您可以通过将其默认display: none更改为inline或block来显示<script>的内容，就像任何其他元素一样...小提琴
这确实是可能的，要跨浏览器兼容，您还需要在 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 和正文的值，您还可以解决 IE6 中存在的布局问题。