Question

我正在尝试将position: fixed应用于网页的body标记。然后我继续将所有边（顶部，底部，左侧，右侧）应用于0，以便它覆盖所有视口。

我的期望是它几乎与没有添加固定位置几乎相同，但现在我没有任何滚动条移动页面。如果我应用overflow: scroll，则会显示虚拟禁用滚动条，而不是可以将我带到页面底部的真实滚动条。

我正在尝试所有这些东西进行扩展。这就是我想移动body标签的原因。

注意：如果我在html标记上应用所有样式，也会发生这种情况。

Answer 1

位置：固定的元素相对于视口是固定的。   即使文档滚动，它也会保持原样。
...

固定定位的元素相对于固定   视口 - 视口始终是它们的包含块。他们总是   查看时出现在浏览器窗口内的同一位置   屏

http://www.w3.org/wiki/CSS_absolute_and_fixed_positioning#Fixed_positioning

基本上，$( this ).css( "width" = w );可能不是你想要的。如果是，您不希望在position:fixed标记上使用它。

Answer 2

根据建议的评论和答案，您基本上不能在position:fixed元素上使用滚动条，但您可以在子元素上使用它，因此在这种情况下，请将<html>标记设置为固定，并<body>溢出。

<强> JSFiddle Demo

＆＃13;

html {
    position: fixed;
    overflow: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: silver;
}
body {
    height: 100%;
    margin: 0;
    overflow: auto;
    background: aqua;
}

＆＃13;

content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content

＆＃13;

Answer 3

正如其他人所说，使正文标记position: fixed通过使其相对于视口而不是文档的其余部分的位置，有效地将其从文档流中删除。

当您设置位置更改属性（top，left，right，bottom）时，您将身体拉伸以覆盖可查看的窗口（请参阅@ AlexW＆＃ 39;答案）。滚动条现在将消失。设置overflow没有任何效果，因为正文正在有效地剪掉它的内容。

如果你希望这个工作，你可能会在身体中注入另一个元素overflow: auto （未经测试），但最好找到一个更合适的方法来做你自己的事情。＃39;重新尝试。

将`position：fixed`应用于`body`会使它丢失滚动条

3 个答案: