我正在尝试在页面顶部放置固定的分隔线,但是当我使用FF滚动时,行会丢失

西蒙·T

底部有一个编辑-查找“ =====编辑====“

我在页面顶部放置一个固定的分区。放置它没问题,但是当我通过上下滚动测试页面时出现问题。

Chrome和IE一切正常,但FF存在问题。问题是在固定的划分下,行“丢失”了。也就是说,页面滚动得太远。

这是测试页。页面的整个源位于此问题的底部。

测试页上的分隔宽度为:80%;左边距:50px; 和不透明度:0.5这使您可以看到分隔线下方的线条。

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

现在为PgDn(或单击滚动条-滚动条,而不是滑块)

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

使用Chrome和IE,突出显示的行仍然可见,更重要的是,其后的行也将可见。

使用FF,突出显示的行以及其后的一两行会在固定分隔线的下方结束。突出显示的行之后的行将丢失-不可见。

我已经在其他站点上成功完成了此操作,但是我不知道他们正在做什么以使其正常运行。

此页面可与FF,Chrome和IE正常使用。还有其他人,但我现在似乎找不到它们。

这是一个与我的测试页存在相同问题的页面,不同之处在于它“浮动”除法直到滚动到顶部,然后“固定”在顶部。我也做了同样的float / fix事情,而且FF也有问题。我在上面指出的测试页只是简单地修复了部门。

与我的问题相同的那个页面的有趣之处在于,这是一个演示如何在页面顶部放置固定除法的示例不适用于FF

yahoo.com是另一个在固定部门下丢失行的问题的页面。固定行下的行丢失几乎与我的测试页上发生的情况相同,但是yahoo比我的测试页“丢失”了更多行。

有谁知道如何在顶部固定一个分隔线并且不丢失该分隔线下方的线条,这些线条在滚动之后应该可见?我的测试适用于Chrome和IE,但不适用于FF。

并且-问题页面上没有代码段链接可用于提供演示代码吗?我在输入问题的页面上看不到它。

<!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>

顺便说一句-当页面右侧的分隔线固定在视口顶部时,该页面右侧的分隔线(带有粉红色背景)会出现问题-顶部被切除。看到顶部的唯一方法是向上滚动到页面顶部。在FF,IE和Chrome中会发生这种情况。

我应该在哪里报告此问题-关于“问问题页面”并提供详细信息?

=====编辑====

感谢user3137702,他告诉我将部门更改为100%。当我这样做时,滚动工作了,但是最初在页面加载时,第1行和第2行位于固定的分区下。

我将正文设置为margin:0px;我将其更改为margin-top:50px; 使第一行可见。我并不担心其他边距-左,右,下,这就是为什么我只更改了边距:0px; 到margin-top:50px; -最容易输入。

  • 但是通过我回到原来的错误。玩了一段时间后,我发现除非margin-left:0px; 设置在body标签上,则无法滚动。

因此,完整的解决方案是将固定比例设置为width:100%;并将正文设置为margin-left:0px; 和margin-top:nnpx,其中nn是固定分隔的高度。

我将添加一些JavaScript来根据固定分隔线的高度设置主体顶部边距,这样,如果固定分隔线的高度发生变化,我就不必弄乱它。

我最初的宽度是:80px;关于分割,因为我希望固定分割显示的宽度小于中心宽度。

我采用了解决问题的代码,并在固定分区下添加了第二个分区。固定部分的背景颜色为:透明;宽度:100%。嵌套的div是内容所在的位置,并设置为width:80%margin-left:auto; 右边距:自动居中。

现在它显示为我想要的,并且可以正确滚动。

这是直到固定分隔的标记结束的新的主体定义:

<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>

这是包含所有更改的页面

再次感谢user3137702,我将选择您的答案。

拥有一切

我只是玩固定页面,发现随着视口变短,IE,FF和Chrome都开始出现滚动问题-如果您调整浏览器窗口的大小或拉起FireBug之类的东西,就会发生这种情况。

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

阿尔泽

我无法确切解释为什么会发生这种情况,但是正是这种宽度弄乱了Firefox。如果将固定div的宽度设置为100%,它将按预期工作。

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

我需要在顶部栏中使用更短的分隔线(使用粉底)

来自分类Dev

我正在尝试使用react应用程序滚动到每个页面的顶部

来自分类Dev

我正在尝试为正在使用的应用程序制作GUI,但是当我尝试打印全局变量时出现错误。为什么?

来自分类Dev

我如何强制分隔线的位置,并将徽标放置在特定位置?

来自分类Dev

我正在尝试安装Eclipse,但是当我尝试运行./configure时,它不起作用

来自分类Dev

我正在尝试在 netbeans 中运行以下 java 代码,但是当我运行代码时,我得到以下异常

来自分类Dev

粘性标题导航菜单,当我向下滚动页面时,沿着顶部的间隙

来自分类Dev

当我使用objecs.values('xx')时,我正在丢失相关字段

来自分类Dev

视差滚动效果有效,但是我的图像不会固定在页面的两侧和顶部

来自分类Dev

嗨,我正在尝试获取刻度的值,但是每当我返回任何函数时,总是使用 __zone_symbol__state 和 __zone_symbol__value 获取值

来自分类Dev

我正在使用PhoneGap,并且在我的页面中正在尝试使用FontAwesome,但是它不起作用?

来自分类Dev

页面倾斜分隔线

来自分类Dev

当我尝试使用锚标记从我的jsp页面调用servlet页面时,显示错误

来自分类Dev

在process.start上使用mysqldump不会发生任何事情,但是当我在cmd上尝试使用该参数时,它正在工作

来自分类Dev

我正在使用elasticserach-1.4.1,当我尝试创建索引时,出现以下错误

来自分类Dev

当我尝试迁移配置文件表时,出现错误。我正在使用laravel 5.1

来自分类Dev

当我添加项目时流星丢失滚动条

来自分类Dev

我正在尝试编辑CANVAS页面,但是我认为内联块做错了一些事情,因此我的图像和文本不会并排放置

来自分类Dev

Java 作业问题:我正在尝试运行我的程序,它没有显示任何错误但是当我尝试运行它时它不起作用?

来自分类Dev

我正在使用php include调用我的标题,但是当我更改标题背景颜色时,它将更改整个网站

来自分类Dev

当我使用平滑滚动时,Bootstrap粘性顶部导航栏重叠的内容

来自分类Dev

我正在尝试用密码保护我的网站,当我弹出窗口登录并使用我的信用凭证时

来自分类Dev

当我尝试在Java中放置ImageIcon时出现错误

来自分类Dev

当我向右滚动条时,图像正在移动

来自分类Dev

uitableviewcell顶部的灰色分隔线

来自分类Dev

uitableviewcell顶部的灰色分隔线

来自分类Dev

我可以使用flex将分隔线放在多行上吗?

来自分类Dev

我要删除操作栏下的分隔线

来自分类Dev

我正在尝试在JDBC中实现TYPE_FORWARD_ONLY。但是当我尝试在结果集中向后移动时,它没有显示任何异常

Related 相关文章

  1. 1

    我需要在顶部栏中使用更短的分隔线(使用粉底)

  2. 2

    我正在尝试使用react应用程序滚动到每个页面的顶部

  3. 3

    我正在尝试为正在使用的应用程序制作GUI,但是当我尝试打印全局变量时出现错误。为什么?

  4. 4

    我如何强制分隔线的位置,并将徽标放置在特定位置?

  5. 5

    我正在尝试安装Eclipse,但是当我尝试运行./configure时,它不起作用

  6. 6

    我正在尝试在 netbeans 中运行以下 java 代码,但是当我运行代码时,我得到以下异常

  7. 7

    粘性标题导航菜单,当我向下滚动页面时,沿着顶部的间隙

  8. 8

    当我使用objecs.values('xx')时,我正在丢失相关字段

  9. 9

    视差滚动效果有效,但是我的图像不会固定在页面的两侧和顶部

  10. 10

    嗨,我正在尝试获取刻度的值,但是每当我返回任何函数时,总是使用 __zone_symbol__state 和 __zone_symbol__value 获取值

  11. 11

    我正在使用PhoneGap,并且在我的页面中正在尝试使用FontAwesome,但是它不起作用?

  12. 12

    页面倾斜分隔线

  13. 13

    当我尝试使用锚标记从我的jsp页面调用servlet页面时,显示错误

  14. 14

    在process.start上使用mysqldump不会发生任何事情,但是当我在cmd上尝试使用该参数时,它正在工作

  15. 15

    我正在使用elasticserach-1.4.1,当我尝试创建索引时,出现以下错误

  16. 16

    当我尝试迁移配置文件表时,出现错误。我正在使用laravel 5.1

  17. 17

    当我添加项目时流星丢失滚动条

  18. 18

    我正在尝试编辑CANVAS页面,但是我认为内联块做错了一些事情,因此我的图像和文本不会并排放置

  19. 19

    Java 作业问题:我正在尝试运行我的程序,它没有显示任何错误但是当我尝试运行它时它不起作用?

  20. 20

    我正在使用php include调用我的标题,但是当我更改标题背景颜色时,它将更改整个网站

  21. 21

    当我使用平滑滚动时,Bootstrap粘性顶部导航栏重叠的内容

  22. 22

    我正在尝试用密码保护我的网站,当我弹出窗口登录并使用我的信用凭证时

  23. 23

    当我尝试在Java中放置ImageIcon时出现错误

  24. 24

    当我向右滚动条时,图像正在移动

  25. 25

    uitableviewcell顶部的灰色分隔线

  26. 26

    uitableviewcell顶部的灰色分隔线

  27. 27

    我可以使用flex将分隔线放在多行上吗?

  28. 28

    我要删除操作栏下的分隔线

  29. 29

    我正在尝试在JDBC中实现TYPE_FORWARD_ONLY。但是当我尝试在结果集中向后移动时,它没有显示任何异常

热门标签

归档