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:

<div id="placeholder" style="width:800px;height:600px"></div>

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?

Answer 1

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

Answer 2

This is the simplest one.

#divid {
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
}

Answer 3

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()
   });
});