make an element full screen in the web page

问题

Any idea to make an element in the page full screen?

For example,a div or an img?

With "full screen" I mean that it should take all the space of user's screen,just like when we watch a video with the full screen model. I do not want the task bar/menu bar of the browser window display.

Any idea?

  div.fullscreen{
    display:block;

    /*set the div in the top-left corner of the screen*/
    position:absolute;
    top:0;
    left:0;

    /*set the width and height to 100% of the screen*/
    width:100%;
    height:100%;
    background-color:red
  }

I have tried the above code,however it is not what I want,it juse take all the space of the browser's content area rather than the user's computer'screen.

回答1:

HTML elements can't break out of the bounds of the browser document window. The menu and tool bar are outside of the document window (which is a child of the browser window), so you can't "reach" them.

I think the only solution is to trigger full screen mode with JavaScript.

This answer shows how you can do that: How to make the window full screen with Javascript (stretching all over the screen)

回答2:

There is a relatively new fullscreen JavaScript api which can make an element full screen.

It has to be called as the result of user input to prevent possible abuse, but it's relatively straight-forward to use:

_{Code from MDN article:}

document.addEventListener("keydown", function(e) {
  if (e.keyCode == 13) {
    toggleFullScreen();
  }
}, false);

function toggleFullScreen() {
  if (!document.fullscreenElement &&    // alternative standard method
      !document.mozFullScreenElement && !document.webkitFullscreenElement) {  // current working methods
    if (document.documentElement.requestFullscreen) {
      document.documentElement.requestFullscreen();
    } else if (document.documentElement.mozRequestFullScreen) {
      document.documentElement.mozRequestFullScreen();
    } else if (document.documentElement.webkitRequestFullscreen) {
      document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
    }
  } else {
    if (document.cancelFullScreen) {
      document.cancelFullScreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.webkitCancelFullScreen) {
      document.webkitCancelFullScreen();
    }
  }
}

回答3:

This is not possible now, and it will probably never be.

Just imagine what would happen if every website you visit had free reign to take over your desktop.

来源：https://stackoverflow.com/questions/5194828/make-an-element-full-screen-in-the-web-page

标签

html

css

fullscreen