html - make an element full screen in the web page

Question

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.

Answer 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)