title: make an element full screen in the web page
body: <p>Any idea to make an element in the page full screen?</p>
  
  <p>For example,a div or an img?</p>
  
  <p>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.</p>
  
  <p>Any idea?</p>
  
  <pre><code>  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
    }
  </code></pre>
  
  <p>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.</p>