我试图在页面顶部放置一个固定的分区，但是当我使用 FF 滚动时，行丢失了

Question

底部有编辑 - 查找 "===== 编辑 ===="

我在页面顶部放置了固定的 division。定位没问题，但是上下滚动测试页面时出现问题

Chrome 和 IE 一切正常，但 FF 有问题。问题是固定 division 下的行是 "lost"。即页面滚动过远

Here is the test page该页面的完整源代码位于该问题的底部。

测试页上的division宽度：80%； margin-left: 50px;和不透明度：0.5 这使您可以看到 division.

下方的线条

转到测试页面并突出显示视口底部的最后一行。突出显示最后一行可以让您在 PgDn 时轻松发现。

现在 PgDn（或单击滚动条 - 滚动条，而不是滑块）

您可以重复突出显示和 PgDn，它的行为应该相同。

在 Chrome 和 IE 中，突出显示的行仍然可见，更重要的是它后面的行将是可见的。

对于 FF，突出显示的行及其后的一两行在固定的 division 下方结束。突出显示行之后的行丢失 - 不可见。

我已经在其他网站上看到此操作成功完成，但我无法弄清楚他们正在做什么才能使其发挥作用。

This page works correctly with FF, Chrome, and IE.还有其他的，但我现在好像找不到。

Here is a page with the same problem as my test page 不同之处在于它 "floats" 滚动到 division 直到它滚动到顶部然后它 "fixes" 它在顶部。我做了同样的 float/fix 事情，它也有 FF 的问题。我在上面指出的测试页只是修复了 division 开始。

关于那个与我的问题相同的页面的有趣之处在于它是一个演示 of how to put a fixed division at the top of the page 而它不适用于 FF

在固定 division 下存在丢失行问题的另一个页面是 yahoo.com。固定 division 下的行丢失与我的测试页上发生的情况非常相似，但雅虎 "loses" 行数比我的测试页多。

有谁知道如何修复顶部的 division 而不会丢失 division 下方的线条，滚动后应该可见的线条？我的测试适用于 Chrome 和 IE，但不适用于 FF。

AND - 问题页面上是否没有可用于提供演示代码的代码片段 link？我在输入问题的页面上没有看到它。

<!DOCTYPE html>
<html>

    <head>
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
        <title>Scroll Test</title>
    </head>

    <body style="margin-top: 0px;">
        <div style="clear: both; opacity: 0.5; margin-left: 50px; width: 80%; background-color: red; top: 0px; position: fixed; height: 50px;"></div>
        <div>
            <script type="text/javascript">
                for (i = 0; i <201; i++) {
                    document.writeln("*** " + i + "*************************************************************************************<br>");
                }
            </script>
        </div>

    </body>

</html>

顺便说一下 - 此页面右侧的 division（粉红色背景）在固定到视口顶部时出现问题 - 顶部被切断。看到顶部的唯一方法是向上滚动到页面顶部。这发生在 FF、IE 和 Chrome.

中

我应该在哪里报告这个问题 - 关于 "ask question page" - 并提供详细信息？

=====编辑====

感谢 user3137702，他告诉我将 division 更改为 100%。当我这样做时，滚动有效，但最初在加载页面时，第 1 行和第 2 行位于固定的 division.

下

我将 body 设置为边距：0px；我将其更改为 margin-top: 50px;使第一行可见。我并不担心其他边距 - 左、右、下，这就是为什么我只更改边距：0px；到 margin-top: 50px; - 最容易打字。

但是那个通过我又回到了原来的错误。玩了一会儿，发现unless margin-left: 0px;在 body 标签上设置，滚动将不起作用。

因此，完整的解决方案是将固定的 division 设置为 width: 100%； body 设置为 margin-left: 0px; margin-top: nnpx，其中 nn 是固定 division 的高度。

我将添加一些 JavaScript 以根据固定 division 的高度设置 body 顶部边距，这样我就不必乱搞它了固定 division 的高度发生变化。

我原来的width: 80px;在 division 上，因为我希望固定的 division 显示得小于 body 宽度和居中。

我拿了解决问题的代码，在固定的division下加了第二个division。固定的 division 具有 background-color：透明；宽度：100%。嵌套的 div 是内容所在的位置，并设置为 width: 80% margin-left: auto; margin-right: 自动居中。

现在它显示如我所愿，并且可以正确滚动。

这是 body 固定 division 标签结尾的新定义：

<body style="margin: 0px; margin-top: 50px;">
 <div style="width: 100%; background-color: transparent;  top: 0px; position: fixed;">
    <div style="width: 80%; margin-left: auto; margin-right: auto; background-color: red; height: 50px;">
        Contents of the child division within the fixed division
    </div>
    </div>
<div>

Here is a page incorporates all of the changes

再次感谢 user3137702，我会select回答你的问题。

撑起一切

刚玩固定页，发现IE、FF、Chrome都开始出现滚动问题t 变短 - 如果您调整浏览器 window 或拉出 FireBug.

之类的内容，就会发生这种情况

我不会花任何时间来弄清楚导致浏览器开始出现异常的大小，那将是浪费时间。可以说 IE 和 Chrome 在比 FF 更高的高度开始出现问题。但是大小是任何人都不可能遇到的。视口必须变得很短才能开始出现问题。

Answer 1

我无法准确解释为什么会这样，但正是宽度让 Firefox 变得混乱；如果将固定 div 的宽度设置为 100%，它会按预期工作。

<div style="background-color: red; top: 0px; left: 0px; position: fixed; height: 50px; width: 100%;">
</div>

我试图在页面顶部放置一个固定的分区，但是当我使用 FF 滚动时，行丢失了

I'm trying to put a fixed division at the top of the page but when I scroll with FF, lines are lost

css-position