height full screen css code example

Example 1: make a div full screen css

height: 100vh

Example 2: full page height css

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
body {
  height: 100%;
  margin: 0;
}

.full-height {
  height: 100%;
  background: green;
}
</style>

</head>
<body>

<div class="full-height">full page height css</div>

</body>
</html>

Example 3: full screen a div

$('#toggle_fullscreen').on('click', function(){
  // if already full screen; exit
  // else go fullscreen
  if (
    document.fullscreenElement ||
    document.webkitFullscreenElement ||
    document.mozFullScreenElement ||
    document.msFullscreenElement
  ) {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen();
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    }
  } else {
    element = $('#container').get(0);
    if (element.requestFullscreen) {
      element.requestFullscreen();
    } else if (element.mozRequestFullScreen) {
      element.mozRequestFullScreen();
    } else if (element.webkitRequestFullscreen) {
      element.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
    } else if (element.msRequestFullscreen) {
      element.msRequestFullscreen();
    }
  }
});

Tags:

Html Example

Recent Posts