CSS - 解决滚动条被平铺的自动大小图像覆盖答案

【问题标题】：CSS - Resolve scroll bar being covered by tiled auto size imagesCSS - 解决滚动条被平铺的自动大小图像覆盖
【发布时间】：2012-01-18 23:44:22
【问题描述】：

我在这个网站上找到了一些很好的帮助，帮助我在固定标题的任一侧平铺图像。我遇到的一个问题是右侧的滚动条被平铺图像覆盖并且无法访问。我确信这很简单，但我现在不知所措。您可以在此处查看示例：http://www.jzandecki.com/example

【问题讨论】：

【解决方案1】：

您需要从头开始重建您的标题。首先创建一个 div（这将是您的标题容器），用 id 命名它，让我们说“标题”。将平铺的黑色图像添加为背景。该 div 的位置应该是 FIXED 而不是 ABSOLUTE。

position: fixed;
background: url("../images/example_top.jpg") repeat scroll 0 0 transparent;
background-repeat: repeat-x;
height: 178px;
width: 100%;

在您的标题 div 中添加另一个 div，其宽度大小为您的发电厂图像的宽度。将此 div 的 css 设置为 margin: auto （使其在屏幕中居中）。

margin: auto;

这应该可以完成工作。如果这可行，您应该拥有与之前相同的视图，但您的滚动条将位于标题顶部而不是隐藏。

编辑：

顺便说一句，我看到你的身体是 900 像素，并且停留在屏幕的左侧。我建议您的身体具有以下属性：

margin: 0;
padding: 0;

正文应该占据整个页面。如果你想为你的内容添加一个 900 像素的包装块，请在你的标题 div 之后添加一个 div（如上所述）。这个新的 div 应该具有以下 css 属性：

width: 900px;
margin: auto; //this centers your div in the middle of your screen
//Other styles that have nothing to do with positioning

祝你好运。

【讨论】：

非常感谢！我会试一试的。
Alex，我已经尝试过你的建议，但我仍然遇到同样的问题。你可以在jzandecki.com/example/example2.html查看我的工作，以确保我的建议正确。
在你身体的 css 中移除溢出：auto;属性，这将解决问题。我建议您添加以下内容：overflow-x: hidden;溢出-y：滚动；在这种情况下，您将始终拥有正确的栏（即使页面不需要滚动，例如在 Firefox 中），但它对用户体验更好（如果页面随着用户访问网站而动态增长）。
Alex，删除“溢出：自动；”来自身体的 css 成功了，给了我想要的结果！当添加“溢出-x：隐藏；”和“溢出-y：滚动；”问题又回来了，所以我把它们排除在外。您可以在jzandecki.com/example/example3.html 查看我想要的结果。感谢您的帮助！
好的，它现在可以工作了！一旦您觉得您的问题已解决，请检查我的第一篇文章（或之前解决实际问题的文章），以免其他人回答已解决的问题。祝你好运。