问题
I have a page with fixed header and footer using Bootstrap3. The content beneath is scrollable. The user may enable the fullscreen mode via F11 or a button (using the FullScreen-API). This works fine in Chrome and FF but has problems in IE11. Fullscreen with F11 works always fine. But toggling fullscreen mode with javascript causes my page to be placed at the top bottom with shrinked width and height when using IE11. My header and footer remain intact.
<body>
<header>Fixed</header>
<main>Scrollable</main>
<footer>Fixed</footer>
</body>
I have created a small fiddle, that may show what I'm doing. Unfortunately the fullscreen wont be toggled in JSFiddle, so better copy the code to somewhere else: https://jsfiddle.net/j122kdju/
Here are two screenshots from the site. I gave the html a green backgound color to see what's happening when enabling fullscreen via JS API. First image shows the page without fullscreen in IE11:
The second shows fullscreen enabled via JS API in IE11:
I may handle this issue by setting html width in css to 100%. Anyway, pages with overflow can't be scrolled anymore. The scrollbar is not visible. As said, this works fine in other browsers.
Is there any workaround available? Am I missing something here? Thanks
EDIT: Maybe related: IE cannot scroll while in fullscreen mode
回答1:
if you want the entire page fullscreen the solution is to send "document.body" for IE11 and "document.documentElement" for Chrome and Firefox
see my complete answer here: IE cannot scroll while in fullscreen mode
回答2:
You can try to set html width to 100% as you said and then force the body to have a scrollbar using
body {
overflow-y: scroll;
}
来源：https://stackoverflow.com/questions/33562396/can-not-scroll-body-while-fullscreen-is-enabled-in-ms-ie11