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

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工作，但应用于身体风格似乎被忽略。对于显示的图像，我可以看到背景的计算样式：

​

​

问题：能否控制浏览器(Chrome，Internet 11+)显示“缺失区域”的方式？

Answer 1

我找到了一种方法来欺骗浏览器()不再显示黑色区域。我已将div样式更改为使用以下样式的整个viewport：

.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%; 
}