5

我添加了两个 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;
}

这是一个显示 div 的 HTML 的 HTML 片段：

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

（（如果你没有得到它：包装器 div 应该是居中的，它是。但是当我调整我的窗口大小时，我发现滚动条出现在包装器内容甚至接近浏览器窗口之前很久边框。这在分辨率低或屏幕小的计算机上会很烦人！））

4

2 回答 2

2

我认为你想要的是让狮子和狼随着用户扩大浏览器视口而逐渐出现，但部分隐藏在包装器的两侧。正确的？

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

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

于 2012-04-21T20:02:40.243 回答
0

我已经检查过您是否发布了链接http://www.torucon.no/no/但我看不到底部滚动条，无论如何，为什么您不能设置背景？

<body>
 <div class="overlay">
     <div class="wrapper">
     </div>
 </div>
</body>


<style>
  body{width:100%; background:---;}
 .overlay{width:100%; background:---;}
<style>
于 2012-04-21T18:43:51.120 回答