Full Size and Full Screen Html Element By Pure CSS

CSS

.full-size-element {
 position: fixed !important;
 position: absolute;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 z-index: 1050;
 background: #fff;
}

JAVA SCRIPT

Add this class dynamically by click using javascript or jquery

 var isOpen = false;

 if (!isOpen) {
      $("#id").addClass("full-size-element");
      isOpen = true;
 } else {
      $("#id" + attrs.niFullScreen).removeClass("full-size-element");
      isOpen = false;
 }


IF YOU WANT TO USE THE FULL SCREEN WINDOW, HERE IS THE THREE METHOD BELOW
                //make full screen element
                function makeFullScreen(divObj) {
                    if (divObj.requestFullscreen) {
                        divObj.requestFullscreen();
                    }
                    else if (divObj.msRequestFullscreen) {
                        divObj.msRequestFullscreen();
                    }
                    else if (divObj.mozRequestFullScreen) {
                        divObj.mozRequestFullScreen();
                    }
                    else if (divObj.webkitRequestFullscreen) {
                        divObj.webkitRequestFullscreen();
                    }
                    inFullScreen = true;
                    return;
                }
 
                //reset full screen element
                function reset() {
                    if (document.exitFullscreen) {
                        document.exitFullscreen();
                    }
                    else if (document.msExitFullscreen) {
                        document.msExitFullscreen();
                    }
                    else if (document.mozCancelFullScreen) {
                        document.mozCancelFullScreen();
                    }
                    else if (document.webkitCancelFullScreen) {
                        document.webkitCancelFullScreen();
                    }
                    inFullScreen = false;
                    return;
                }
 
                //  get full screen element across several browsers
                function getFSWindow() {
                    if (document.fullscreenElement) {
                        return document.fullscreenElement;
                    }
                    else if (document.msFullscreenElement) {
                        return document.msFullscreenElement;
                    }
                    else if (document.mozFullScreenElement) {
                        return document.mozFullScreenElement;
                    }
                    else if (document.webkitFullscreenElement) {
                        return document.webkitFullscreenElement;
                    }
                }
THE CALLING OF THREE METHOD
var inFullScreen = false; // flag to show when full screen

var divO = $("#ID");
if (inFullScreen == false) {
  makeFullScreen(divO); // open to full screen
} else {
  reset();
}