전체 화면보다 작은 요소에 대해 전체 화면을 전환 할 때 어떻게 브라우저 "누락 영역"색을 변경할 수 있습니까?

Question

다음과 같은 문제가 있습니다. 웹 응용 프로그램에서 사용자 지정 전체 화면 모드를 전환 할 때 주변 배경이 검은 색이어서 실제 배경으로 변경하고 싶습니다.

자세한 사항은 아래에 제공됩니다.

1) 자바 스크립트 코드는 내부 요소

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

사업부의 작품 전체 화면 모드로 전환 만의 스타일을 적용을 전체 화면 전환 및 초점을 맞 춥니 다 시체가 무시되는 것 같습니다. 표시된 이미지를 위해, 나는 배경이 계산 된 스타일을 볼 수

질문 :은 브라우저 (크롬, 인터넷 익스플로러 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%; 
}