background-color - 当为小于整个身体的元素切换全屏时，如何更改浏览器“缺失区域”颜色？

Question

我有以下问题：当从 Web 应用程序切换自定义全屏模式时，周围的背景是黑色的，我想改变它（作为实际背景）。

详情如下。

1) 用于切换全屏并聚焦内部元素的 Javascript 代码

    function toggleFullScreen(elem) {
        if (elem.requestFullscreen) {
           elem.requestFullscreen();
           } else if (elem.mozRequestFullScreen) {
           elem.mozRequestFullScreen();
           } else if (elem.webkitRequestFullscreen) {
           elem.webkitRequestFullscreen();
           }
           else if (elem.msRequestFullscreen) {
               elem.msRequestFullscreen();
           }
    }

    $(function () {

        $("#fullscreenButton").click(function () {
           var actualBody = document.getElementById("@FullScreenElementId");
           if (actualBody) {
               toggleFullScreen(actualBody);
           }
         });

         $(document).on("webkitfullscreenchange mozfullscreenchange fullscreenChange MSFullscreenChange", function (/*data*/) {
             var actualBodyJq = $("#@FullScreenElementId");
             if (actualBodyJq) {
                 actualBodyJq.toggleClass("fullscreen-style");
             }

             $("body").toggleClass("fullscreen-body-style");
    });
});

2）CSS样式

.fullscreen-style {
    overflow-y: scroll;
    background-color: rgb(255, 255, 255) !important;
}

.fullscreen-body-style {
    background-color: rgb(255, 255, 255) !important;
}

为 div 切换到全屏模式可以工作，但似乎忽略了为 body 应用样式。对于显示的图像，我可以看到这个计算的背景样式：

问题：是否可以控制浏览器（Chrome、Internet Explorer 11+）如何显示“缺失区域”？

Answer 1

我找到了一种方法来欺骗浏览器（Internet Explorer）不再显示黑色区域。我已更改 div 样式以使用具有以下样式的整个视口：

.fullscreen-style {
    overflow-y: scroll;
    background-color: rgb(255, 255, 255) !important;

    /* this is remove black area in IE */
    position:absolute;
    left:0;
    top:0;
    width: 100%;
    height: 100%; 
}