4

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

<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 在全屏模式下无法滚动

4

2 回答 2

1

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

在此处查看我的完整答案： IE 在全屏模式下无法滚动

于 2017-06-11T10:08:37.667 回答
0

您可以尝试按照您所说的将 html 宽度设置为 100%，然后使用

body {
overflow-y: scroll;
}
于 2015-11-06T08:35:19.270 回答