4

我正在制作一个网站，在屏幕的每一侧都有许多“浮动”图像。页面的高度范围约为 900-3000 像素，因此我创建了浮动图像来覆盖该区域。

问题是，即使页面只有 900 像素高，页面也会将浮动图像视为页面上的对象，并可以滚动到它们……使页面比需要的长得多。

根据我在 StackOverflow 上收集到的信息。绝对元素不应计入文档流，但显然这些是。我还看到了涉及使用溢出的答案：隐藏，但这似乎根本没有达到预期的效果。

也许唯一的方法是使用javascript根据页面高度创建图像？

这是相关网站的 WIP：http: //apa.smars.se

4

2 回答 2

3

如果你想要一个纯 CSS 的解决方案，你应该这样做：

  1. 添加position:relative;和margin:0到<body>元素。

  2. 添加下一个元素作为您的第一个元素<body>：

    <div style="position:absolute; left:0; top:0; width:100%; height:100%; overflow:hidden;">

  3. 将<div class="botleft ...">and<div class="botright ...">元素移动到该 div。

通过应用position:relative到<body>元素并向其添加另一个元素，position:absolute; left:0; top:0; width:100%; height:100%您可以告诉该元素“跟踪”<body>元素的大小。并通过添加overflow:hidden;隐藏底部溢出的图像。

此解决方案的缺点是您可能会在页面底部看到剪切图像。好吧，没有什么是完美的:)

这是更改后 DOM 树的外观

在此处输入图像描述

要立即查看结果，您可以从浏览器的控制台运行以下代码：

d = document.createElement("div");
d.style.cssText = "position:absolute; left:0; top:0; width:100%; height:100%; overflow:hidden;";
document.body.insertBefore(d, document.body.firstChild);
d.appendChild(document.getElementsByClassName("botleft")[0]);
d.appendChild(document.getElementsByClassName("botright")[0]);
document.body.style.position = "relative";
document.body.style.margin = "0";
于 2013-03-24T22:08:27.870 回答
1

当你给absolute一个元素一个位置时，它变得与relative包含绝对元素的第一个元素相关。

而且由于元素的默认位置是静态的，您可能必须为容器元素更改它（可能是body您的情况）。

祝你好运！

于 2013-03-24T22:17:25.593 回答