绝对定位:一个元素扩展窗口,其他元素不影响它.两者都使用相同的代码:C

Question

我添加了两个div来保存背景图像用于装饰目的 - 根据在网站上与我合作的艺术家的要求.

起初,它运作良好.图像应该显示在包含网站内容的包装div的每一侧 - 不影响页面宽度.

然后拥有该网站的组织得到了另一个赞助商,我必须将该徽标添加到右侧的列中.我为第5个"按钮"创建了一个新的id,并为它创建了一个div.上传它,我注意到页面底部突然出现一个滚动条,没有明显的原因.

我首先怀疑按钮是问题,但最终发现最右边的装饰div正在弯曲页面宽度,尽管使用绝对定位.两个div都使用相同的代码,仅镜像左右.我不知道是什么导致了这个问题..

(你可以在www.torucon.no/no/上看到问题的实际效果)

请帮帮我!这是两个div的CSS:

#wolf
{
position:absolute;
min-height:500px;
min-width:498px;
left:-293px;
top:150px;
background-image:url('http://www.torucon.no/css/wolf.png');
z-index:-1;
}

#lion
{
position:absolute;
min-height:500px;
min-width:498px;
right:-293px;
top:150px;
background-image:url('http://www.torucon.no/css/lion.png');
z-index:-1;
}

这是一个HTML代码段,显示了div的HTML:

<div class="wrapper"> <!-- Contains the entire website for structure --> 
<div id="wolf">
</div>
<div id="lion">
</div>

((如果你没有得到它:包装器div应该居中,它是.但是当我调整窗口大小时,我发现在包装器内容甚至靠近浏览器窗口之前很久就会出现一个滚动条在低分辨率或小屏幕的计算机上这会很烦人!))

Answer 1

我认为你想要的是当用户扩大浏览器视口时让狮子和狼逐渐出现，但否则部分隐藏到包装器的侧面。正确的？

我认为在不触发您不喜欢的滚动条的情况下实现这一目标的唯一安全选择是将图像组合成一个并将它们作为背景图像附加到页面的主体元素上。

我相信你在主体上使用溢出隐藏是正确的——如果视口的大小调整到低于包装器的宽度，你将失去滚动查看溢出内容的能力。