How do I make a div full screen

Question

I am using Flot to graph some of my data and I was thinking it would be great to make this graph appear fullscreen  occupy full space on the monitor  upon clicking on a button  Currently  my div is as follows    lt div id  placeholder  style  width 800px height 600px  gt  lt  div gt    Of course  the style attribute is only for testing  I will move this to CSS after during the actual design  Is there anyway I could make this div fullscreen and still preserve all event handling

User · Answer

u can try this     lt div id  placeholder  style  width auto height auto  gt  lt  div gt    width and height depends on your flot or graph    hope u want this     or   By clicking  u can use this by jquery      placeholder   css  width     window  width         placeholder   css  height     window  height

User · Answer

When you say  full-screen   do you mean like full-screen for the computer  or for taking up the entire space in the browser   You can t force the user into full-screen F11  however  you can make your div full screen by using the following CSS  div  width  100   height  100      This will of course assume your div is child of the  lt body gt  tag  Otherwise  you d need to add the following in addition to the above code   div  position  absolute  top  0  left  0

User · Answer

Use document height if you want to show it beyond the visible area of browser scrollable area    CSS Portion   foo       position absolute      top 0      left 0      JQuery Portion    document  ready function            foo   css          width    document  width           height    document  height

User · Answer

widget-HomePageSlider  slider-loader-hide       position  fixed      top  0px      left  0px      width  100       height  100       z-index  10000      background  white

User · Answer

This is the simplest one    divid      position  fixed     top  0     right  0     bottom  0     left  0

User · Answer

You can use HTML5 Fullscreen API for this  which is the most suitable way i think    The fullscreen has to be triggered via a user event  click  keypress  otherwise it won t work   Here is a button which makes the div fullscreen on click  And in fullscreen mode  the button click will exit fullscreen mode    x000D   x000D      toggle fullscreen   on  click   function    x000D       if already full screen  exit x000D       else go fullscreen x000D    if   x000D      document fullscreenElement    x000D      document webkitFullscreenElement    x000D      document mozFullScreenElement    x000D      document msFullscreenElement x000D        x000D      if  document exitFullscreen    x000D        document exitFullscreen    x000D        else if  document mozCancelFullScreen    x000D        document mozCancelFullScreen    x000D        else if  document webkitExitFullscreen    x000D        document webkitExitFullscreen    x000D        else if  document msExitFullscreen    x000D        document msExitFullscreen    x000D        x000D      else   x000D      element       container   get 0   x000D      if  element requestFullscreen    x000D        element requestFullscreen    x000D        else if  element mozRequestFullScreen    x000D        element mozRequestFullScreen    x000D        else if  element webkitRequestFullscreen    x000D        element webkitRequestFullscreen Element ALLOW KEYBOARD INPUT   x000D        else if  element msRequestFullscreen    x000D        element msRequestFullscreen    x000D        x000D      x000D      x000D   container  x000D    border 1px solid red  x000D    border-radius   5em  x000D    padding 10px  x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt div id  container  gt  x000D     lt p gt  x000D       lt a href     id  toggle fullscreen  gt Toggle Fullscreen lt  a gt  x000D     lt  p gt  x000D    I will be fullscreen  yay  x000D   lt  div gt  x000D   x000D   x000D    Please also note that Fullscreen API for Chrome does not work in non-secure pages  See https   sites google com a chromium org dev Home chromium-security deprecating-powerful-features-on-insecure-origins for more details   Another thing to note is the  fullscreen CSS selector  You can append this to any css selector so the that the rules will be applied when that element is fullscreen    container -webkit-full-screen   container -moz-full-screen   container -ms-fullscreen   container fullscreen       width  100vw      height  100vh

User · Answer

Can use FullScreen API like this  function toggleFullscreen       let elem   document querySelector   demo-video       if   document fullscreenElement        elem requestFullscreen   catch err   gt          alert  Error attempting to enable full-screen mode    err message     err name                  else       document exitFullscreen            Demo   x000D   x000D  const elem   document querySelector   park-pic    x000D   x000D  elem addEventListener  click   function e    x000D    toggleFullScreen    x000D     false   x000D   x000D  function toggleFullScreen     x000D   x000D    if   document fullscreenElement    x000D      elem requestFullscreen   catch err   gt    x000D        alert  Error attempting to enable full-screen mode    err message     err name      x000D          x000D      else   x000D      document exitFullscreen    x000D      x000D    x000D   container  x000D    border 1px solid  aaa  x000D    padding 10px  x000D    x000D   park-pic   x000D    width  100   x000D    max-height  70vh  x000D    x000D   lt div id  container  gt  x000D     lt p gt  x000D       lt a href     id  toggle-fullscreen  gt Toggle Fullscreen lt  a gt  x000D     lt  p gt  x000D     lt img id  park-pic  x000D        src  https   storage coverr co posters Skate-park  gt  lt  video gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

CSS way    foo      position  absolute     top  0     right  0     bottom  0     left  0      JS way     function         function abso                 foo   css               position   absolute               width    window  width                height    window  height                            window  resize function             abso                          abso

User · Answer

lt div id  placeholder  style  position absolute  top 0  right 0  bottom 0  left 0   gt  lt  div gt

User · Answer

For fullscreen of browser rendering area there is a simple solution supported by all modern browsers   div placeholder       height  100vh      The only notable exception is the Android below 4 3 - but ofc only in the system browser webview element  Chrome works ok    Browser support chart  http   caniuse com viewport-units  For fullscreen of monitor please use HTML5 Fullscreen API

[javascript] How do I make a div full screen?

Examples related to javascript

Examples related to jquery

Examples related to html

Examples related to css

Examples related to flot