9

我有：我有几个网页都有这个大纲：

<body>
<div id="container">
CONTENT
</div>
</body>

使用 CSS：

body{
color:#000000;
background-color:#FFFFFF;
background-image: url(background.jpg);
background-repeat: repeat-x;
font-family: verdana;
letter-spacing: 1px;
}
#container{
margin-left:auto;
margin-right:auto;
margin-top:5px;
width: 700px;
}

问题：所有页面都很短，因此没有显示滚动条，但一页较长，因此出现了右侧的垂直滚动条。这第二页导致容器稍微移动（向左）。

据我了解，一个常见的解决方案是让滚动条出现在所有页面上，但我真的想避免这种情况，因为它只是众多页面中的一页。

问题：有没有办法避免移动容器，同时保持它居中而不使滚动条出现在所有页面上？

4

4 回答 4

11

拥有大显示器的人永远不会在任何页面上看到滚动条。

使用小显示器的人总是会在所有页面上看到滚动条。

尽管显示器大小，人们可以自由地将任何浏览器窗口设置为任何大小并导致滚动条。

哦，我们不要忘记那些喜欢添加十几个浏览器工具栏插件的人，这些插件使浏览器窗口的内容区域尽可能高一半。

就是这样，没有静态解决方案可以解决这个问题。由于上述原因，更改一页上的边距不是解决方案。

如果你坚持修复人们已经学会接受的东西，它必须是一个“动态”的 JavaScript 解决方案，你可以在其中计算左边距并添加滚动条的宽度。对于不同的浏览器，条的宽度不同，因此您也必须计算这一点。

编辑： 就像有人在另一个答案中所说的那样，这是默认的浏览器行为，应该不理会。

Edit2： 正如用户阻尼在评论中所说，每次用户调整窗口大小后，您还必须触发 JavaScript。

这将是对你时间的巨大浪费。通常，浏览器的默认行为留给浏览器。要考虑的变量太多，如果您没有要测试的所有场景、皮肤、操作系统、浏览器版本、浏览器品牌、工具栏插件、监视器类型、大小等，您一定会错过一些东西. 一旦你开始让它工作，你会发现你需要对 Explorer 进行例外和更正。在不知不觉中，你最终会出现一大块臃肿......为什么？这有什么价值？

起点： 在所有浏览器和情况下 100% 保证预期行为。

结束点： 保证仅在您的显示器/系统中看起来很棒……您冒着在您甚至没有想过的系统/场景上看起来像垃圾的风险。

首先搜索预制的 JavaScript 解决方案或 jQuery 插件...如果找不到，请问自己为什么？

  • 不实用
  • 不可能
  • 不值得麻烦（低需求）

Edit3： 我做了一些搜索来满足我的好奇心。我找到了一个带有 jQ​​uery 解决方案的线程以及计算滚动条宽度的方法的链接。

恕我直言，这是浪费时间和资源，但这是任何有兴趣的人的链接......

http://expressionengine.com/archived_forums/viewthread/158703/

Edit4： 这是我找到的 CSS 解决方案。我没有对此进行测试，但如果它有效，那就太好了。

html {
    overflow-y: scroll;
}

http://haslayout.net/css-tuts/Fixing-Page-Shift-Problem

Edit5： CSS 解决方案有效，但不是我喜欢的。它为每个页面创建滚动条，但在不需要时它们会变灰或为空......不优雅。

于 2011-04-09T15:04:13.607 回答
10

我不知道纯 CSS 解决方案，但您可以使用 javascript 动态计算和调整左边距的正确宽度（同时使右边距更薄 - 按滚动条的大小）。

顺便说一句：IMO：处理这个问题的正确方法是：保持原样。因为这是一种默认行为，我认为用户不会像您一样担心这一点。这是我的观点，可能有人有不同的看法，但是在每个页面上添加滚动条（解决这个问题）是史诗般的失败。:)

于 2011-04-09T14:52:28.493 回答
0

当您在长页面上时，您也可以使用 php 添加一个左填充值，但滚动条在不同的浏览器/平台中的宽度会有所不同，因此 javascript 将是唯一像素完美的解决方案。

于 2011-04-09T14:59:24.007 回答
0

如果你想要一个纯 css 选项，我相信一个绝对定位的 div 在 body 内，宽度和高度为 100%，溢出自动和右填充大于滚动条的宽度，将替换普通滚动条而不将内容转移到留在长页上。

我知道我很久以前就使用过这种技术，但我不记得我必须使用的确切 css 怪癖。

于 2011-04-09T15:49:55.210 回答