Question

我有一个使用Bootstrap3固定页眉和页脚的页面。下面的内容是可滚动的。用户可以通过F11或按钮（使用FullScreen-API）启用全屏模式。这在Chrome和FF中运行良好但在IE11中有问题。全屏与F11一起工作总是很好。但是，当使用IE11时，使用javascript切换全屏模式会导致我的页面被放置在顶部，并且宽度和高度都会缩小。我的页眉和页脚保持不变。

<body>
    <header>Fixed</header>
    <main>Scrollable</main>
    <footer>Fixed</footer>
</body>

我创造了一个小小提琴，可以展示我正在做的事情。不幸的是全屏不会在JSFiddle中切换，所以最好将代码复制到其他地方：https://jsfiddle.net/j122kdju/

以下是该网站的两个截图。我给html一个绿色的背景颜色，看看通过JS API启用全屏时发生了什么。第一张图片显示IE11中没有全屏的页面：

第二个显示在IE11中通过JS API启用全屏：

我可以通过将css中的html宽度设置为100％来处理此问题。无论如何，具有溢出的页面不能再滚动。滚动条不可见。如上所述，这在其他浏览器中运行良好。

是否有可用的解决方法？我在这里错过了什么吗？感谢

编辑：可能相关：IE cannot scroll while in fullscreen mode

Answer 1

如果您希望整个页面全屏显示解决方案是为IE11发送“document.body”，为Chrome和Firefox发送“document.documentElement”

在这里看到我的完整答案： IE cannot scroll while in fullscreen mode

Answer 2

您可以尝试将html宽度设置为100％，然后使用

强制主体使用滚动条

body {
overflow-y: scroll;
}

在MS IE11

2 个答案: