1

有没有办法让元素不导致父溢出，但保持可见？让我澄清一下

有一个类似水印的标志以下面的方式应用到一个页面上。它应该部分位于主要内容之外（蓝色虚线）

我不知道以这样一种方式设置元素背景的选项，它会随着浏览器窗口水平调整大小而持续存在，所以我刚刚添加了一个<div>带有徽标作为其背景并position:absolute具有相对于 main 的必要偏移量的选项内容容器。

以前，只要浏览器宽度大于W1. 现在，在主内容框之外添加了一个额外的“水印”元素，只要浏览器比W2

我有什么明显的遗漏吗？背景设置，或者可能是一个整洁的边距解决方法/

小样

更新：

我添加了一个粗略的 jsfiddle 来说明这个问题

4

2 回答 2

1

请记住，元素的宽度大于包含填充和边距的实际“宽度”，如果您的 div 上有填充，则将“宽度”减少等量。

那有意义吗？如果您发布实际的 css 和 html，可能会更容易给您更详细的答案

另外，您能否不将图像指定为实际主体元素的背景并将其设置为居中？

我玩过代码，并为你想出了一个可能的解决方案。

放

body{overflow-x:hidden;}

然后加

@media all and (max-width: 400px)
{
 body{overflow-x:auto;   }
}

一旦您的屏幕小于 400 像素（div 的宽度），您的溢出：隐藏将被覆盖，您将获得滚动条。

此时您可能还想减小水印的宽度。

于 2012-06-14T03:40:11.413 回答
1

不幸的是，仅仅因为您嵌套了“水印” div 并将其定位绝对不会使其位于文档之外。如果将其放在文档之外，页面将滚动（如您所见）。

对我来说，我想到的第一个解决方案是将水印移到“内容”div 之外，并将水印应用到其父容器。我猜你没有这样做，因为你需要它与“内容”div相关，但这是值得尝试的。

此外，它滚动的原因是因为文档已经溢出。快速修复但不推荐使用“overflow-x: hidden;” 在“内容” div 的父容器上。

由于您已经剥离了 HTML 的其余部分，因此很难为您提供解决方案，如果您的结构在某些方面很复杂，一些“修复”可能不适用。

于 2012-06-14T04:37:53.767 回答